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随 着 HTML5、CSS3 和 JavaScript 技术 的 广泛 应 用 ，Web 前 端 开发 者 
的 工作 量 大 大 减轻 ,开发 成 本 不 断 降低 ,三 者 是 Web 项 目 开 发 中 非常 重要 的 
开发 技术 。HTML5 跨 平 台 的 优势 使 其 在 未 来 的 技术 市 场 中 逐渐 发 展 成 为 
主流 开发 技术 ,占据 越 来 越 重要 的 地 位 。 本 书 以 HTML5 为 主体 ,搭配 
CSS3 和 JavaScript, 并 且 立 足 于 当前 网 络 行业 ,成 为 您 充实 自己 实力 或 路 入 
网 页 设计 领域 的 最 好 帮手 。 

1. 本 书 内 容 

全 书 共 分 为 13 章 , 各 章节 主要 内 容 如 下 : 

第 1 章 主 要 对 Internet 与 Web 技术 进行 概述 。 包括 Internet 与 万 维 
网 、 域 名 、URL 等 概念 ,以 及 开发 工具 sublime text 的 安装 和 使 用 。 

第 2 章 介 绍 HTML5 的 网 页 文档 结构 。 包 括 HTML5 文档 的 基本 框 
架 、 标 记 和 标记 属性 等 语法 ,为 编写 Web 程序 打下 基础 。 

第 3 章 介绍 HTML5 文档 文字 与 段落 的 处 理 , 包 括 文字 内 容 \ 文 字 修 
饰 、 段 落 等 常用 标记 。 

第 4 章 介绍 用 HTML5 建立 超 链接 。 包 括 文字 、 图 片 、 邮 箱 的 超 链接 ， 
锚 点 的 使 用 和 相对 路 径 与 绝对 路 径 的 概念 等 。 

第 5 章 介 绍 用 HTML5 创建 列表 。 包 括 无 序列 表 、 有 序列 表 、 嵌 大 ,列表 
和 自 定义 列表 。 

第 6 章 介绍 多 媒体 的 应 用 。 包 括 图 片 、 音 频 和 视频 的 应 用 。 

第 7 章 介绍 用 HTML5 创建 表格 。 包 括 表格 的 常用 属性 、 样 式 设计 、 表 
格 嵌 套 等 。 

第 8 章 介绍 使 用 表单 。 包 括 表单 概述 、 表 单 基 本 元 素 的 使 用 和 表单 的 验 
证 方法 和 属性 等 。 

第 9 章 介绍 HTML5 的 高 级 应 用 。 包 括 画布 ,地理 位 置 `、Web 存储 、 应 
用 缓存 等 高 级 应 用 技术 。 

第 10 章 介 绍 CSS3 基础 。 包 括 CSS3 基础 语法 、 选 择 器 、 媒 体 查询 等 。 

第 11 章 介绍 CSS3 的 高 级 应 用 。 包 括 Div 元 素 、 导 航 栏 设计 、 动 画 设 
计 等 。 

第 12 章 介绍 JavaScript 基本 语法 和 内 置 对 象 。 包 括 JavaScript 简介 、 
数据 类 型 与 变量 、 运 算 符 与 表达 式 、 流 程控 制 语句 和 函数 、 字 符 串 对 象 、 数 学 
对 象 、 日 期 对 象 和 数组 对 象 等 。 
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第 13 章 介绍 JavaScript 的 对 象 编程 。 包 括 常 用 对 象 .DOM 操作 和 事件 编程 。 

2. 本 书 特色 

(1) 知识 全 面 ,内 容 丰 富 。 内 容 由 浅 入 深 ,涵盖 了 所 有 HTML5、CSS3 和 JavaScript 
知识 点 ,便于 读者 全 面 掌握 网 页 设计 技术 。 

(2) 循序 渐进 ,难度 适中 。 知 识 结构 安排 合理 ,把 知识 点 融 汇 于 案例 实 训 中 ,并 且 结 
合 经 典 案例 进行 讲解 和 拓展 ,帮助 读者 快速 入 门 。 

(3) 理论 与 实际 紧密 结合 。 书 中 穿插 大 量 综合 案例 ,帮助 读者 学 习 理 论 知识 的 同时 ， 
更 好 地 结合 开发 实践 ,掌握 网 页 设计 工作 中 解决 实际 问题 的 方法 。 

(4) 结合 最 新 工具 ,高 效 开 发 。 本 书 采 用 Web 开发 中 广泛 应 用 的 Sublime Text3 开 
发 工具 进行 讲述 ,使 读者 在 学 习 知 识 的 同时 ,能 够 熟练 高 效 地 使 用 工具 。 

(5) 配套 资源 完善 。 为 帮助 读者 更 好 地 使 用 本 教材 进行 学 习 , 教 材 配 套 相 关 教 学 资 
源 , 提 供 免费 的 图 片 、 代 码 等 相关 素材 ,还 特别 为 教师 提供 PowerPoint 教案 ,方便 教师 授 
课 使 用 。 

3. 读者 对 象 

本 书 适 合作 为 高 等 学 校 计算 机 科学 与 技术 、 软 件 工程 .信息 管理 与 信息 系统 、 网 络 工 
程 . 物 联网 工程 .信息 科学 技术 .数字 媒体 技术 及 其 他 文 、 理 科 相关 专业 或 计算 机 公共 基础 
的 “网 页 开发 与 设计 ”“ 网 页 制作 ”“Web 编程 技术 ”“Web 前 端 开发 技术 ”等 课程 教学 的 
教材 ,也 可 作为 网 页 设计 初学 者 快速 入 门 的 自学 读物 。 书 中 大 量 的 示例 模拟 了 真实 的 网 
页 设计 案例 ,对 读者 的 学 习 有 现实 的 借鉴 意义 。 

4. 作者 团队 

本 书 作者 孙 甲 霞 、 吕 莹 莹 、 李 学 勇 等 长 期 从 事 网 页 设计 课程 教学 工作 。 和 孙 甲 起 编写 第 
1~3 章 , 昌 莹 莹 编写 第 4 一 7 章 , 金 松林 编写 第 8 一 10 章 , 李 学 勇 编写 第 11~13 章 , 另 外 ， 
在 本 书 的 编写 过 程 中 , 牛 燕尾 在 素材 的 整理 等 工作 中 也 付出 了 辛勤 的 劳动 ,才能 使 此 书 和 
读者 见面 。 在 本 书 的 编写 过 程 中 ,我 们 力求 精益 求 精 , 但 由 于 水 平 有 限 , 书 中 难免 有 不 足 
之 处 ,恳请 读者 谅解 。 读 者 如 果 遇 到 问题 或 有 意见 和 建议 , 敬 请 与 我 们 联系 ,我 们 将 全 力 
提供 帮助 。 
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2017 年 1 月 
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Internet 与 Web 基础 


本 章 主 要 介绍 Internet 与 Web 技术 的 基础 知识 和 原理 ,包括 Internet 与 万 维 网 、 域 
名 与 统一 资源 定位 器 (URL) 浏览 器 与 服务 器 , 超 文本 标记 语言 HTML 与 HTML5、 网 
站 的 组 成 .Web 前 端 开发 相关 技术 CSS JavaScript 以 及 Sublime Text 的 使 用 简介 。 

本 章 重 点 

。 了 解 Internet 的 由 来 与 相关 基础 知识 

。 了解 HTML 语言 和 Web 前 端的 相关 技术 

。 掌握 Sublime Text 的 安装 与 使 用 


1.1 Internet 与 万 维 网 


Internet 译名 “因特网 ”, 也 称 国 际 互联 网 。Internet 是 一 个 把 世界 范围 内 的 计算 机 、 人 、 
数据 库 ,软件 和 文件 通过 一 个 共同 的 通信 协议 (TCP/IP 协议 ) 连 接 起 来 相互 会 话 的 网 络 。 

该 网 络 集合 了 全 球 丰 富 的 信息 资源 和 系统 资源 ,进入 Internet 后 就 可 以 利用 其 中 各 
个 网 络 和 各 种 计算 机 上 无 穷 无 尽 的 资源 ,与 世界 各 地 的 人 们 进行 通信 和 交换 信息 ,享受 
Internet 提供 的 各 种 服务 。Internet 所 提供 的 服务 包括 : 

(1) WWW 服务 。 

(2) 电子 邮件 服务 。 

(3) 远程 登录 服务 。 

(4) 文件 传输 服务 。 

(5) 电子 公告 栏 服务 。 

(6) 新 闻 服务 。 

(7) 电子 商务 。 

(8) 电子 政务 。 

Web ,全 称 是 World Wide Web, 缩 写 为 WWW ,译名 “万 维 网 ”或 “全 球 信息 网 ”等 。 

Web 是 Internet 提供 的 一 种 服务 ,是 基于 Internet、 采 用 Internet 协议 的 一 种 体系 结 
构 , 因 而 它 可 以 访问 Internet 的 每 一 个 角落 。 它 以 Internet 为 依托 ,以 超 文本 标记 语言 
HTML(Hyper Text Markup Language) 与 超 文 本 传输 协议 HTTP(Hyper Text Transfer 
Protocol) 为 基础 ,向 用 户 提供 统一 访问 界面 的 Internet 信息 浏览 系统 。 

近年 来 ,Web 得 到 了 迅猛 的 发 展 ,Web 技术 几乎 已 进入 所 有 的 信息 领域 ,如 新 闻 、 广 
告 .信息 服务 、 电 子 商务 、 电 子 政务 和 企业 事业 管理 系统 等 。 
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. 驳 注 意 internet 小 写 代 表 互 联网 ,Internet 大 写 代表 因特网 。 


1.1.1 Intemet 的 诞生 与 发 展 


Internet 是 在 美国 早期 的 军用 计算 机 网 ARPANET( 阿 帕 网 ) 的 基础 上 经 过 不 断 发 展 
变化 而 形成 的 。Internet 的 起 源 主 要 可 分 为 以 下 几 个 阶段 。 

1，Internet 的 雏形 阶段 

1969 年 ,美国 国防 部 高 级 研究 计划 局 (Advanced Research Projects Agency) 开 始 建 
立 一 个 命名 为 ARPANET 的 网 络 。 当 时 建立 这 个 网 络 的 目的 是 出 于 军事 需要 ,计划 建立 
一 个 计算 机 网 络 , 当 网 络 中 的 一 部 分 被 破坏 时 ,其 余 网 络 部 分 会 很 快 建立 起 新 的 联系 。 人 
们 普遍 认为 这 就 是 Internet 的 雏形 。 

2. Internet 的 发 展 阶 段 

美国 国家 科学 基金 会 (National Science Foundation, NSF) 在 1985 开始 建立 计算 机 
网 络 NSFNET。NSF 规划 建立 了 15 个 超级 计算 机 中 心 及 国家 教育 科研 网 ,用 于 支持 科 
研 和 教育 的 全 国 性 规模 的 NSFNET, 并 以 此 作为 基础 ,实现 同 其 他 网 络 的 连接 。1989 年 
MILNET( 国 际 互联 网 的 前 身 ) 实 现 和 NSFNET 连接 后 ,就 开始 采用 Internet 这 个 名 称 。 
自 此 以 后 ,其 他 部 门 的 计算 机 网 络 相 继 并 入 Internet， ARPANET 就 宣告 解散 了 。 

3， Internet 的 商业 化 阶段 

20 世纪 90 年 代 初 ,商业 机 构 开 始 进入 Internet, 使 Internet 开始 了 商业 化 的 新 进程 ,成 
为 Internet 发 展 的 强大 推动 力 。1995 年 ,NSFNET 停止 运作 ,Internet 已 彻底 商业 化 了 。 
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20 世纪 40 年 代 以 来 ,人 们 就 梦想 能 拥有 一 个 世界 性 的 信息 库 。 在 这 个 信息 库 中 , 信 
息 不 仅 能 被 全 球 的 人 们 存 取 .而且 能 轻松 地 链接 到 其 他 地 方 的 信息 ,使 得 用 户 可 以 方便 快 
捷 地 获得 重要 的 信息 。 

最 早 的 网 络 构想 可 以 追溯 到 遥远 的 1980 年 带 姆 . 伯 纳 斯 * 李 构 建 的 ENQUIRE 项 
目 。 这 是 一 个 类 似 维基 百科 的 超 文本 在 线 编辑 数据 库 。 

1989 年 3 月 , 伯 纳 斯 。 李 撰写 了 《关于 信息 化 管理 的 建议 》 一 文 ,文中 提 及 
ENQUIRE 并 且 描 述 了 一 个 更 加 精巧 的 管理 模型 。1990 年 11 月 13 日 他 在 一 台 NeXT 
工作 站 上 写 了 第 一 个 网 页 以 实现 他 文中 的 想法 。 在 那 年 的 圣诞 假期 , 伯 纳 斯 。 李 制作 了 
一 个 网 络 工作 所 必须 的 所 有 工具 : 第 一 个 万 维 网 浏览 器 (同时 也 是 编辑 器 ) 和 第 一 个 网 页 
服务 器 。 

1991 年 8 月 6 日 .他 在 alt.hypertext 新 闻 组 上 贴 了 万 维 网 项 目 简介 的 文章 ,标志 
因特网 上 万 维 网 公共 服务 的 首次 亮相 。 

1994 年 6 月 ,北美 的 中 国 新 闻 计 算 机 网 络 (China News Digest), 即 CND, 在 其 电子 
出 版 物 ( 华 夏 文 摘 ) 上 将 World Wide Web 称 为 “万 维 网 ”, 这 样 其 中 文 名 称 汉语 拼音 也 是 
以 WWW 开始。 万 维 网 这 一 名 称 后 来 被 广泛 采用 。 在 中 国 台 湾 ,“ 全 球 资讯 网 ”这 一 名 称 
则 是 比较 直接 的 意译 。 
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1.2 统一 资源 标识 符 和 域名 


万 维 网 信息 分 布 在 全 球 ,要 快速 方便 地 找到 所 需 信 息 就 必须 定位 到 资源 的 所 在 位 置 。 
统一 资源 定位 符 就 是 用 来 确定 信息 位 置 的 方法 。 而 域名 是 上 网 单位 和 个 人 在 网 络 上 的 重 
要 标识 ,起 着 识别 作用 ,便于 他 人 识别 和 检索 某 一 企业 、 组 织 或 个 人 的 信息 资源 ,从 而 更 
好 地 实现 网 络 上 的 资源 共享 。 通 俗 地 说 ,域名 就 相当 于 一 个 家 庭 的 门牌 号 码 ,别人 通过 这 
个 号 码 可 以 很 容易 地 找到 你 。 
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统一 资源 定位 符 (URL) 是 用 于 完整 地 描述 Internet 上 网 页 和 其 他 资源 的 地 址 的 一 
种 标识 方法 ,是 对 Internet 上 资源 的 位 置 和 访问 方法 的 一 种 简洁 表示 。 

Internet 上 的 每 一 个 网 页 或 资源 都 具有 一 个 唯一 的 URL 标识 ,也 称 为 URL 地 址 ,这 
个 地 址 可 以 是 本 地 磁盘 上 的 文件 ,也 可 以 是 局 域 网 上 的 某 一 台 计 算 机 ,更 多 的 是 Internet 
上 的 站 点 。URL 通过 定义 资源 位 置 的 抽象 标识 来 定位 网 络 资源 ,其 格式 如 下 : 


< 通信 协议 > ://< 主 机 名 或 IP 地 址 > :< 端口 号 > /< 文件 路 径 > 


1. 通信 协议 

通信 协议 是 指使 用 哪 种 Internet 的 通信 协议 来 连接 服务 器 ,包括 ftp( 文 件 传输 服 
务 ) .http( 超 文本 传输 服务 ) Telnet( 远 程 登录 服务 ) .gopher(Gopher 服务 ) .mailto( 电 子 
邮件 地 址 ) .news( 提 供 网 络 新 闻 服 务 ) 和 wais( 提 供 检 索 数 据 库 信息 服务 ) 等 。 

2. 主机 名 

主机 名 是 要 访问 的 服务 器 的 全 名 (服务 器 全 名 包括 域名 和 主机 名 ) ,也 可 以 是 服务 器 
的 IP 地 址 ,表明 服务 器 在 网 络 中 的 位 置 。 

3. 端口 号 

对 某 些 资 源 的 访问 ,主机 名 后 还 要 加 端口 号 ,以 便 操作 系统 用 来 辨别 特定 信息 服务 的 
软件 端口 。 域 名 与 端口 号 之 间 用 冒号 隔 开 。 一 般 情 况 下 ,服务 器 程序 采用 标准 的 保留 端 
口号 ,所 以 可 以 省 略 端口 号 。 

4. 文件 路 径 

文件 路 径 是 服务 器 上 保存 目标 文件 的 目录 , 它 是 浏览 器 访问 的 最 终 目标 。 以 下 是 一 
些 URL 的 例子 : 


http://www.microsoft.com:23/exploring/exploring.html 
http://www.whitehouse.gov 

telnet://bbs.nstd.edu 

ftp://ftp.microsoft.com/ 

mailto:jt747 @ms.hinet .net 

file://c:/temp/abc-html 


多 注意 :“://" 是 URL 规范 要 求 的 标记 。 


Ve HM5 网 页 设计 教程 


122 域名 


IP 地 址 是 计算 机 网 络 设备 的 地 址 标识 ,但 对 于 网 络 用 户 来 说 ,由 数字 组 成 的 IP 地 址 
是 难以 记忆 的 。 为 此 TCP/IP 协议 中 提供 了 域名 服务 系统 (DNS) ,允许 为 主机 分 配 字符 
名 称 , 即 域名 。 在 网 络 通 信 中 由 DNS 自动 实现 域名 与 IP 地 址 的 转换 。 例 如 ,百度 的 IP 
地 址 为 202. 108. 22. 5, 同 时 用 域名 www. baidu. com 也 能 访问 到 同一 网 址 。 

Internet 中 的 域名 采用 分 级 命名 ,其 基本 结构 如 下 : 


主机 名 .三 级 域名 .二 级 域名 .顶级 域名 


域名 的 结构 和 管理 方式 如 下 : 
首先 ,DNS 将 整个 Internet 划分 成 多 个 域 , 称 为 项 级 域 ,并 为 每 个 顶级 域 规定 了 国际 
通用 的 域名 。 顶 级 域名 采用 两 种 划分 模式 : 组 织 模式 和 地 理 模式 。 常 见 的 组 织 机 构 类 别 























如 表 1-1 所 示 。 
表 1-1 顶级 域名 中 常见 的 组 织 机 构 类 别 

域 名 类 别 域 名 类 别 
.com 工 、 商 ,金融 等 企业 .biz 工商 企业 
‘edu 教育 机 构 .int 国际 组 织 
.gov 政府 组 织 .org 非 至 利 组 织 
.mil 军事 部 门 .info 信息 相关 机 构 
.net 网 络 相 关机 构 . name 个 人 网 站 
.coop 合作 机 构 .areo 航空 运输 
. Pro 医生 ,律师 ,会计 专 用 . museum 博物 馆 


域名 中 常见 的 地 理 区 域 如 表 1-2 所 示 。 
表 1-2 顶级 域名 中 常见 的 地 理 区 域 


























域 名 国家 和 地 区 域 名 国家 和 地 区 

.cn 中 国 大 陆 a 美国 

.ru 俄罗斯 .in 印度 

von 加 拿 大 .hk 中 国 香港 地 区 
.uk 英国 .sg 新 加 坡 

.de 德国 .tw 中 国 台湾 地 区 
.jp 日 本 .mo 中 国 澳门 地 区 
本 . 法 国 .kr 韩国 

















其 次 ,Internet 的 域名 管理 机 构 将 顶级 域 的 管理 权 分 派 给 指定 的 管理 机 构 , 各 管理 机 
构 对 其 管理 的 域 进行 划分 , 即 划 分 成 二 级 域 ,并 将 二 级 域 的 管理 权 授予 其 下 属 的 管理 机 
构 , 依 此 类 推 ,使 形成 了 树 形 域名 结构 。 
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1.3 浏览 器 与 服务 器 


网 络 信息 服务 在 逻辑 上 采用 浏览 器 /服务 器 (Browser/Server, 简 称 B/S 模型 ) 工 作 模 
式 ,一 般 用 户 的 计算 机 称 为 客户 机 ,用 于 提供 服务 的 机 器 称 为 服务 器 。 
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B/S 结构 (Browser/Server, 浏 览 器 /服务 器 模式 ) ,是 Web 兴起 后 的 一 种 网 络 结 构 模 
式 ,Web 浏览 器 是 客户 端 最 主要 的 应 用 软件 。 
这 种 模式 统一 了 客户 端 ,将 系统 功能 实现 的 核 
心 部 分 集中 到 服务 器 上 ,简化 了 系统 的 开发 、 人 
维护 和 使 用 。 客 户 机 上 只 要 安装 一 个 浏览 器 下 (服务 居 
(Browser) ,如 Internet Explorer( 微 软 公司 出 


品 的 浏览 器 )、Chrome (谷歌 浏 览 器 )、Firefox [Emm ey 
(火狐 浏览 器 ) .Opera( 欧 朋 浏览 器 ) ,服务 器 安 & 忆 
装 Oracle、Sybase、Informix 或 SQL Server 等 a 好 


数据 库 。 浏 览 器 通过 Web 服务 器 同 数 据 库 进 
行 数据 交互 。 这 样 就 大 大 简化 了 客户 端 电 脑 
载荷 ,减轻 了 系统 维护 与 升级 的 成 本 和 工作 
量 , 降 低 了 用 户 的 总 体 成 本 (TCO) ,如 图 1-1 所 示 。 

由 于 C/S 结构 存在 的 种 种 问题 ,因此 人 们 又 在 它 原 有 的 基础 上 提出 了 一 种 具有 三 层 
模式 (3-Tier) 的 应 用 系统 结构 浏览 器 /服务 器 (B/S) 结 构 。B/S 结构 是 伴随 着 因特网 的 兴 
起 ,对 C/S 结构 的 一 种 改进 。 从 本 质 上 说 ,B/S 结构 也 是 一 种 C/S 结构 , 它 可 看 作 是 一 种 
由 传统 的 二 层 模 式 C/S 结构 发 展 而 来 的 三 层 模式 C/S 结构 在 Web 上 应 用 的 特例 。 

B/S 结构 主要 是 利用 了 不 断 成 熟 的 Web 浏览 器 技术 ,结合 浏览 器 的 多 种 脚本 语言 和 
ActiveX 技术 ,用 通用 浏览 器 实现 原来 需要 复杂 专用 软件 才能 实现 的 强大 功能 ,同时 节约 
了 开发 成 本 。 

B/S 结构 最 大 的 优点 就 是 可 以 在 任何 地 方 进 行 操作 而 不 用 安装 任何 专门 的 软件 ,只 
要 有 一 台 能 上 网 的 计算 机 就 能 使 用 ,客户 端 零 安装 、 零 维护 。 系 统 的 扩展 非常 容易 。 

B/S 结构 的 使 用 越 来 越 多 ,特别 是 由 需求 推动 了 AJAX 技术 的 发 展 , 它 的 程序 也 能 
在 客户 端 计算 机 上 进行 部 分 处 理 , 从 而 大 大 的 减轻 了 服务 器 的 负担 ;并 增加 了 交互 性 ,能 
进行 局 部 实时 刷新 。 


图 1-1 B/S 结构 





1.4 HTML 语言 与 HTML5S 


万 维 网 成 功 的 根源 ,是 一 种 基于 文本 的 标记 语言 一 -HTML。 网 页 是 通过 HTML 
格式 写成 的 ,HTML 通过 标记 (Tag) 式 指令 ,将 声音 、 图 片 . 影 像 和 文字 等 连接 并 显示 出 
来 。HTML 是 符合 SGML (Standard Generalized Markup Language, 标 准 通用 标记 语 
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言 ) 语 法 的 一 种 固定 格式 的 超 文本 标记 语言 。 当 打开 HTML 页 面 时 ,浏览 器 将 自动 解释 
标记 的 含义 ,并 按 标记 指明 的 格式 展示 内 容 。 
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HTML(Hyper Text Markup Language) 即 超 文 本 标记 语言 ,是 一 种 用 来 制作 超 文本 
文档 的 简单 标记 语言 ,也 是 制作 网 页 的 最 基本 的 语言 之 一 。HTML 文档 可 以 直接 由 浏览 
器 运行 。 

HTML 最 基本 的 语法 是 过 标记 符 之 过 /标记 符 之 。 标 记 符 通常 是 成 对 使 用 ,有 一 个 
开头 标记 和 一 个 结束 标记 。 结 束 标记 只 是 在 开头 标记 的 前 面 加 一 个 斜 杠 */”。 当 浏览 器 
收 到 HTML 文件 后 ,就 会 解释 里 面 的 标记 符 , 然 后 把 标记 符 表达 的 功能 展示 出 来 。 

例如 ,在 HTML 中 用 二 p 二 二 /p 二 标记 符 来 定义 一 个 段落 。 当 浏览 器 遇 到 二 p 二 
二 /p 二 标记 时 ,会 把 该 标记 包含 的 内 容 自 动 形 成 一 个 段落 。 但 遇 到 二 br/ 二 标记 符 时 ,会 
自动 换行 ,并 且 该 标记 后 的 内 容 会 从 一 个 新 行 开始 。 

在 浏览 器 中 打开 一 个 网 页 , 右 击 空白 处 ,在 弹出 的 快捷 菜单 中 选择 [查看 源 文 件 ] 菜 单 
命令 ,就 能 看 到 当前 网 页 的 HTML 代码 ,如 图 1-2 所 示 。 

















7 -En 
语言 GD view-sourcerfile:///E/code/practice/index1 html Qs 

到 <!DOCTYPE htm = 

2 <html> 

3| <head> 

4 《title>HTML5</title> 

5 《link rel=”stylesheet” type="text/css” href="l16. css”> 

6 </head> 

7 <body> 

a 《header》 

9 <hl>Header</hl> 

10 </header> 

人 div id= container > 

位 《na 

13 h3>Nav 

14 a href: 

15 a href: 品 

16 《a href=”“> 人 才 招聘 C/a> 

17 《a href=”“> 关 于 我 们 </a> 

18 /nav> 

19 《section; 

20 <h2>section</h2. 

21 Sarticle> 

22 header> Chl>Article Header</hl>¢/header> 

23 p>An article should make sense on its own and it should be 

possible to distance it ts own and it should be possible to distance it </p> 
24 footer> <h2>Article Footer</h2>¢/footer> 
25 </article> 




















图 1-2 网 页 的 HTML 代码 


142 ”HTM 的 最 新 版 本 一 一 HTML5 

HTML 是 一 种 描述 语言 ,而 不 是 一 种 编程 语言 ,主要 用 于 描述 超 文本 中 内 容 的 显示 
方式 。 标 记 语 言 从 诞生 至 今 , 经 历 了 20 多 年 .发 展 过 程 中 也 有 很 多 曲折 ,经 历 的 版 本 及 发 
布 日 期 如 表 1-3 所 示 。 
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表 1-3 HTML 发 展 历程 









































版 本 发 布 日 期 说 明 

超 文 本 标记 语言 1993 年 互联 网 工程 工作 小 组 (IETF) 工 作 草 案 发 布 

HTML2.0 1995 年 作为 RFC1866 发 布 ,在 RFC2854 于 2000 年 6 月 发 布 之 后 被 宣布 
过 时 

HTML3.2 1996 年 “| W3C 推荐 标准 

HTML4.0 1997 年 ”| W3C 推荐 标准 

HTML4.01 1999 年 “| 微小 改进 ,W3C 推荐 标准 

RD 2000 年 基于 严格 的 HTML4. 01 语法 ,是 国际 标准 化 组 织 和 国际 电工 委 
员 会 的 标准 

XHTMLI1.0 2000 年 “| W3C 推荐 标准 (修订 后 于 2008 年 重新 发 布 ) 

XHTML1.1 2001 年 “| 较 1.0 有 微小 改进 

HTML5 草案 2008 年 “| HTML5 的 第 一 份 正式 草案 

守 届 2014 年 “| W3C 宣 布 HTMLS 标准 制定 完成 并 发布 

元 





HTML5 有 两 大 特点 : 首先 ,强化 了 Web 网 页 的 表现 性 能 。 其 次 ,追加 了 本 地 数据 
库 等 Web 应 用 的 功能 。 广义 论 及 HTML5 时 ,实际 指 的 是 包括 HTML、CSS 和 
JavaScript 在 内 的 一 套 技术 组 合 。 它 希望 能 够 减少 浏览 器 对 于 需要 插件 的 丰富 性 网 络 应 
用 服务 (plug-in-based rich internet application, RIA), 如 Adobe Flash、Microsoft 
Silverlight, 与 Oracle JavaFX 的 需求 ,并 且 提 供 更 多 能 有 效 增 强 网 络 应 用 的 标准 集 。 

HTML5 还 增加 了 许多 新 的 特性 ,这 些 新 元 素 的 加 入 使 HTML5 能 够 实现 以 往 客户 
端 软 件 才 能 实现 的 功能 。 

1. 新 的 元 素 

HTML5 提供 了 一 些 新 的 元 素 和 属性 ,一 些 过 时 的 HTML 标记 被 取消 。HTML5 中 
定义 新 元 素 见 表 1-4。 

表 1-4 HTMLS 新 元 素 


























标 签 描 述 
<article> 定义 页 面 独立 的 内 容 区 域 
<aside> 定义 页 面 的 侧 边 栏 内 容 
<bdi> 允许 设置 一 段 文本 ,使 其 脱离 其 父 元 素 的 文本 方向 设置 
command> 定义 命令 按钮 ,比如 单 选 按钮 复 选 框 或 按钮 
<details> 用 于 描述 文档 或 文档 某 个 部 分 的 细节 
<dialog> 定义 对 话 框 ,比如 提示 框 
<summary> 标签 包含 details 元 素 的 标题 
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续 表 
标 签 描 述 
<figure> 规定 独立 的 流 内 容 (图 像 . 图 表 、 照 片 .代码 等 ) 
<figcaption> 定义 <figure> 元 素 的 标题 
<footer> 定义 section 或 document 的 页 脚 
header> 定义 了 文档 的 头 部 区 域 
<mark> 定义 带 有 记号 的 文本 
<meter> 定义 度量 衡 。 仅 用 于 已 知 最 大 和 最 小 值 的 度量 
<nav> 定义 运行 中 的 进度 (进程 ) 
<ruby> 定义 ruby 注释 (中 文 注音 或 字符 ) 
<rt> 定义 字符 (中 文 注音 或 字符 ) 的 解释 或 发 音 
<rmr> 在 ruby 注释 中 使 用 ,定义 不 支持 ruby 元 素 的 浏览 器 所 显示 的 内 容 
<section> 定义 文档 中 的 节 (section) 
<time> 定义 日 期 或 时 间 
<wbr> 规定 在 文本 中 的 何 处 适合 添加 换行 符 
2. 新 的 API 
除了 原先 的 DOM 接口 ,HTML5 增加 了 更 多 样 化 的 API。 下 面 是 HTML5 一 些 有 
趣 的 新 特性 。 


(1) Canvas API: 动态 生成 图 形 、 图 表 、 图 像 以 及 动画 。 

(2) Audio 与 Video API: 为 开发 者 提供 了 一 套 通用 的 、 集 成 的 ,脚本 式 的 处 理 音频 
与 视频 的 API, 而 无 需 安装 任何 插件 。 

(3) Form API: 包含 多 个 新 的 表单 输入 类 型 。 这 些 新 特性 提供 了 更 好 的 输入 控制 和 

(4) Web Storage API: 在 客户 端 浏览 器 中 以 键 值 的 形式 在 本 地 存储 数据 ,无 论 用 户 
离开 站 点 还 是 关闭 浏览 器 后 再 次 打开 时 存储 数据 都 会 存在 。 

(5) Communication API: 构建 实时 (real-time) 和 跨 源 (cross-origin) 通 信 。 

(6) Geolocation API: 用 户 可 共享 地 理 位 置 ,并 在 Web 应 用 的 协助 下 享用 位 置 感知 
服务 。 

(7) Drag and Drop API: 通过 鼠标 对 目标 元 素 进 行 拖 放 操作 。 

(8) File API: 处 理 文件 上 传 和 操作 文件 。 

(9) Web SQL Database API: 允许 应 用 程序 通过 一 个 异步 的 JavaScript 接口 访问 数 
据 库 。 


全 提示 : HTML 语言 是 不 区 分 大 小 写 的 。 
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1.5 Web 前 端 开发 相关 技术 


151 CSS 


CSS 样式 表 (Cascading Style Sheets, CSS), 又 称 为 层 秋 式样 式 表 ,由 W3C(World 
Wide Web Consortium) 组 织 开 发 的 。CSS 样式 是 预先 定义 的 一 个 格式 集合 ,包括 字体 、 
大 小 、 颜 色 、 对 齐 方式 等 。 利 用 CSS 样式 可 以 使 整个 站 点 的 风格 保持 一 致 ,是 网 页 设计 中 
用 途 最 广泛 、 功 能 最 强大 的 元 素 之 一 。 

样式 表 的 目的 就 是 将 结构 和 格式 分 离 。 样 式 表 将 定义 结构 和 定义 格式 的 两 部 分 相互 
分 离 , 从 而 使 网 页 设计 人 员 能 够 对 网 页 的 布局 施加 更 多 的 控制 。HTML 仍 可 以 保持 简单 
明了 的 初衷 ,而 样式 表 代 码 独 立 出 来 后 则 从 另 一 角度 控制 网 页 外 观 。 

利用 样式 表 , 可 以 将 站 点 上 所 有 的 网 页 都 指向 某 个 CSS 文件 ,用 户 只 需要 修改 CSS 
文件 中 的 某 一 行 ,那么 整个 站 点 都 会 随 之 发 生 改 变 。 这 样 ,通过 样式 表 就 可 以 将 许多 网 页 
的 风格 格式 同时 更 新 ,不 用 再 一 页 一 页 地 更 新 。 

下 面 的 例 1-1 给 出 了 网 页 中 添加 CSS 的 代码 和 运行 效果 。 


< 上 = 例 1=-1-=> 
< !DOCTYPE html> 
<html> 
<head> 
<title>< /title> 
<style> 
中 人 
font- size:50px; 
color:red; 
text- deceration:line 
} 
</style> 
</head> 
<body> 
< /body> 
</html> 


在 例 1-1 中 ,使 用 了 CSS 的 所 有 了 标签 都 应 用 该 style 样式 ,而 不 需要 在 每 一 个 html 
标签 中 再 写 一 遍 。 
152 JavaScript 

1. JavaScript 概述 


JavaScript 是 一 种 基于 对 象 (Object) 和 事件 驱动 (Event Driven) 并 具有 安全 性 能 的 
脚本 语言 。 使 用 它 的 目的 是 与 HTML 超 文本 标记 语言 ,Java 脚本 语言 (Java 小 程序 ) 一 
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起 实现 在 一 个 Web 页 面 中 链接 多 个 对 象 ,与 Web 客户 交互 作用 , 它 是 通过 竺 入 或 调 入 在 
标准 的 HTML 语言 中 实现 的 , 它 的 出 现 弥补 了 HTML 语言 的 缺陷 。 

2. JavaScript 的 特点 

JavaScript 是 一 种 脚本 编写 语言 , 它 采 用 小 程序 段 的 方式 实现 编程 ,同时 它 也 是 基于 
对 象 的 语言 。 

JavaScript 是 一 种 基于 Java 基本 语句 和 控制 流 之 上 的 简单 而 紧凑 的 设计 ,从 而 对 于 
学 习 Java 是 一 种 非常 好 的 过 渡 。 其 次 , 它 的 变量 类 型 是 采用 弱 类 型 ,并 未 使 用 严格 的 数 

JavaScript 是 一 种 安全 性 语言 , 它 不 允许 访问 本 地 的 硬盘 ,不 能 将 数据 存 人 到 服务 器 
上 ,不 允许 对 网 络 文档 进行 修改 和 删除 ,只 能 通过 浏览 器 实现 信息 浏览 或 动态 交互 ,从 而 
有 效 地 防止 数据 的 丢失 。 

JavaScript 是 动态 的 , 它 可 以 直接 对 用 户 或 客户 输入 做 出 响应 ,无须 经 过 Web 服务 
程序 。 它 对 用 户 的 响应 是 采用 以 事件 驱动 的 方式 进行 的 。 所 谓 事件 驱动 ,就 是 指 在 主 
页 (Home Page) 中 执行 了 某 种 操作 所 产生 的 动作 ,就 称 为 “事件 ”(Event) 。 比 如 按 下 鼠 
标 、 移 动 窗口 .选择 菜单 等 都 可 以 视 为 事件 。 当 事件 发 生 后 ,可 能 会 引起 相应 的 事件 
响应 。 

JavaScript 是 依赖 于 浏览 器 本 身 , 与 操作 环境 无 关 , 只 要 能 运行 浏览 器 的 计算 机 ， 
并 支持 JavaScript 的 浏览 器 就 可 正确 执行 ,从 而 实现 了 “编写 一 次 , 走 遍 天 下 ”的 
梦想 。 
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工 欲 善 其 事 , 必 先 利 其 器 。 虽 然 使 用 记事 本 也 能 编写 HTML 文件 ,但 是 编写 效率 太 
低 , 本 书 选择 了 现在 非常 流行 的 工具 一 一 Sublime Text。Sublime Text 是 一 个 轻 量 、 简 
洁 、 高 效 、 跨 平台 的 编辑 器 , 它 方便 的 配色 以 及 兼容 vim 快捷 键 等 各 种 优点 ,博得 了 很 多 
前 端 开发 人 员 的 喜爱 ! 


16.1 Sublime Text 的 安装 


1. 安装 与 初始 化 配置 

Sublime Text 官方 网 站 为 http://www. sublimetext. com。 

如 图 1-3 是 Sublime Text 下 载 的 样 例 页 面 。 

2. 个 人 风格 配置 

与 其 他 GUI 环境 下 的 编辑 器 不 同 ,Sublime Text 并 没有 一 个 专门 的 配置 界面 , 它 使 
用 JSON 配置 文件 ,选择 Preferences 菜单 ,Setting User 命令 ,如 图 1-4 所 示 。 

参考 设置 如 下 : 

{"font size": 15, // 字 体 大 小 

"font face": "Consolas", // 字 体 类 型 

"line padding top": 2, // 设 置 每 一 行 到 顶部 ,以 像素 为 单位 的 间距 ,效果 相当 于 行距 
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Hom' Download Buy Blog Forum Support 


Sublime Text 


Sublime Text is a sophisticated text editor for code, markup and prose. 
You'll love the slick user interface, extraordinary features and amazing performance. 
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dst[dst_idx++] = charset[((38 & ) 1 (ls15 
(src_ldx + 1 < ller 
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图 1-3 Sublime Text 下 载 网 站 





国 DAcode\practice\index.html 。- Sublime Text (UNREGISTERED) 
le Edit Selection Find View Goto Tools Project | Preferences) Help 

Browse packag 
Settings ~ Default 
Settings - User 
Settings - More 
Key Bindings ~ Default 
Key Bindings — User 
Font 


Color Scheme 


昌 Line 11, Column 25 





图 1-4 设置 用 户 风 格 
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"line padding bottom": 2, // 设 置 每 一 行 到 底部 ,以 像素 为 单位 的 间距 
"fold buttons": true, // 是 否 显示 代码 折叠 按钮 
"auto complete": true, // 代 码 提示 
"default encoding": "UTF- 8", // 上 默认 编码 格式 
"tree animation enabled": true, // 左 侧 边栏 文件 夹 动画 
"ignored packages": // 删 除 你 想 要 忽略 的 插件 
["Vintage"] 


} 
在 打开 的 文件 中 重 写 人 个 人 的 设置 ,如 图 1-5 所 示 。 








ferences.sublime-settings * (btml5) - Sublme Text (UNREGISTERED) 
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百 tine column 


1-5 修改 个 人 设置 
3 注意 : 代码 设置 均 在 Preferences 习 Settings-User 中 写 入 。 
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1. 项 目 工程 

(1) 新 建 工程 。Sublime Text 可 以 把 指定 的 一 个 或 多 个 文件 夹 当 作 工 程 的 工作 
空间 。 

首先 ,展开 Site Bar: 选择 View 菜单 ,在 Site Bar 子 菜单 中 选择 Show Side Bar, 如 
图 1-6 所 示 。 

其 次 ,创建 工程 : 选择 Project 菜单 , 单 击 Add Folder to Project 命令 ,如 图 1-7 所 示 ， 
在 弹出 的 文件 窗口 选择 要 建立 的 工程 文件 夹 ,如 图 1-8 所 示 。 这 时 就 会 显示 相应 目录 下 
的 目录 树 , 如 图 1-9 所 示 。 如 果 还 需 添 加 其 他 文件 夹 ,重复 创建 工程 操作 即 可 。 
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图 1-6 展开 Site Bar 
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图 1-7 添加 工程 文件 
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图 1-8 选择 工程 文件 路 径 
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图 1-9 添加 工程 文件 后 


(2) 保存 工程 。 选 择 Project 菜单 , 单 击 Save Project As 命令 ,如 图 1-10 所 示 。 

保存 后 ,Sublime Text 将 自动 生成 两 个 文件 : 

。 project_name. sublime-project: 包含 工程 定义 文件 .该 文件 会 被 记录 到 目录 树 里 。 

。 project_name. sublime-workspace: 包含 用 户 的 工程 数据 ,例如 打开 的 文件 和 修改 
等 ,该 文件 不 会 被 记录 到 目录 树 里 ,如 图 1-11 所 示 
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1-10 保存 工程 文件 
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图 1-11 Sublime Text 文件 目录 


(3) 切换 工程 。 同 时 有 几 个 工程 要 开发 , 单 击 Project 菜单 中 的 Open Project 命令 ， 
找到 * . sublime-project 文件 ,打开 即 可 ,如 图 1-12 所 示 。 如 果 直 接 使 用 Sublime Text 编 
辑 * . sublime-project 文件 ,会 自动 载 人 工程 。 

(4) 版 本 控制 。Sublime Text 可 以 很 简单 地 安装 TortoiseSVN 插件 和 Git 插件 进行 
工程 项 目的 版 本 控制 。 这 里 不 再 介绍 ,具体 可 以 到 Package Control 官网 去 查看 相应 的 安 
装 和 使 用 方法 ,网 址 如 下 : 





https://packagecontrol.io/packages/TortoiseSVN 
https://packagecontrol.io/packages/TortoiseGIT 


者 注意 ， 安装 版 本 控制 插件 前 ,必须 先 安装 相应 的 软件 和 配置 好 环境 才能 正常 
使 用 。 
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1-12 ”打开 工程 文件 


2. 编写 HTML 代码 
(1) 新 建文 件 。 选 择 File 菜单 ,在 弹出 的 子 中 选择 New File, 此 时 生成 一 个 空 
的 文件 , 即 可 编写 属于 自己 的 HTML 代码 ,如 图 1-13 所 示 。 
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图 1-13 新 建文 件 
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(2) 保存 工程 。 选 择 File 菜单 , 单 击 Save 选项 ,在 弹出 的 窗口 中 输入 文件 名 ,选择 保 
存 类 型 为 HTML, 单 击 “ 保 存 ” 按 钮 ,如 图 1-14 所 示 。 
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图 1-14 保存 工程 文件 


1.7 本 章 小 结 


HTML、CSS 和 JavaScript 在 网 页 设计 中 扮演 重要 角色 ,应 该 重点 掌握 。HTML 是 
基础 架构 ,CSS 用 来 美化 页 面 ,而 JavaScript 用 来 实现 网 页 的 动态 性 、 交 互 性 。Sublime 
Text 作为 当前 流行 的 网 站 开发 工具 ,本章 介 绍 了 其 下 载 ,安装 和 配置 过 程 。 


HTML5 结构 与 基础 语法 


学 习 本 章 的 目的 是 掌握 HTML5 文档 的 基本 框架 .标记 和 标记 属性 等 语法 ,为 编写 
Web 程序 打下 基础 。 

本 章 重 点 

。 掌握 HTML5 文档 基本 结构 

。 掌握 标记 属性 的 使 用 规则 


2.1 HTMLS5 文档 结构 


HTML5 是 一 种 用 来 描述 网 页 的 语言 ,一 个 完整 的 HTML 文档 是 由 头 部 和 主体 两 个 
部 分 内 容 组 成 的 。 头 部 内 容 主要 是 用 来 定义 标题 和 样式 等 。 主 体内 容 包 含 了 要 显示 的 信 
息 。 下 面 的 例 2-1 给 出 了 HTML5 的 基本 结构 。 


<!-- 例 2-1--> 
< !DOCTYPE html> 
<html> 
<head> 
<title> 网 页 标题 < /title> 
<meta charset= "utf- 8" /> 
</head> 
<body> 
网 页 主体 内 容 
< /body> 
</html> 


从 上 述 代 码 中 可 以 看 到 ,一 个 HTML5 文档 包含 如 下 基本 要 素 : 

(1) DOCTYPE 声明 了 文档 类 型 。 

(2) 过 html 之 生 /html 二 作为 网 页 的 开始 和 结束 语句 ,其 他 HTML 标记 都 放 在 
到 html 二 二 /html> 之 间 。 

(3) 过 head 一 标记 用 于 定义 文档 的 头 部 , 它 是 所 有 头 部 标记 的 容器 。 

(4) <title 盖 二 /title 之 规定 了 关于 文档 的 标题 内 容 。 

(5) 二 body 二 定义 文档 的 主体 ,包含 文档 的 所 有 内 容 。 
汐 注 意 : HTML5 标记 不 区 分 大 小 写 。 
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21.1 文档 类 型 定义 


文档 类 型 定义 二 !DOCTYPE 二 声明 必须 是 HTML5 文档 的 第 一 行 , 位 于 二 html 二 标 

签 之 前 , 它 不 是 HTML 标签 。 在 HTML5 中 ,文档 的 类 型 定义 被 大 大 简化 ,在 HTML5 

只 需要 使 用 二 ! DOCTYPE html 之 语句 来 规范 浏览 器 的 行为 , HTML5 中 使 用 
二 1IDOCTYPE html 才 语句 的 实例 如 下 : 





< IDOCTYPE html> 
坟 注 意 ; 一 1DOCTYPE> 声 明 没有 结束 标签 。 
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过 head> 标 记 是 所 有 头 部 标记 的 容器 。 它 是 开始 标签 过 html 之 后 出 现 的 第 一 个 标 
签 ,以 二 head 二 开始 ,二 /head 二 结束 ,开始 和 结束 之 间 可 以 包含 标题 信息 、 元 信息 、 定 义 
CSS 样式 和 JavaScript 脚本 代码 等 。 

过 head> 标 记 中 的 内 容 , 一 般 不 会 显示 在 网 页 上 。 以 下 是 二 head 之 中 所 包含 的 标记 。 

1. 标题 一 title 二 标记 

<title> 只 能 包含 关于 网 页 标题 的 文本 ,而 不 能 包含 其 他 任何 标记 。title 元 素 作 用 如 下 : 

。 定义 浏览 器 工具 栏 中 的 标题 。 

。 提供 页 面 被 添加 到 收藏 夹 时 显示 的 标题 。 

。 显示 在 搜索 引擎 结果 中 的 页 面 标题 。 

二 title 志 标记 的 结构 如 下 : 

<title> 网 页 的 标题 < /title> 


2. 元 信息 一 meta 一 标记 

二 meta 记 标记 可 提供 相关 页 面 的 元 信息 (meta-information) ,比如 针对 搜索 引擎 和 更 
新 频 度 的 描述 和 关键 词 。meta 是 HTML 语言 head 区 的 一 个 辅助 性 标签 ,主要 有 以 下 4 
种 使 用 方法 。 

(1) 字符 集 charset 属性 。 在 HTML5 中 ,还 可 以 使 用 对 二 meta 二 标签 直接 追加 
charset 属性 的 方式 来 指定 字符 编码 ,如 下 所 示 : 

<meta charset= "UTF- 8"/> 

以 上 语句 表示 网 页 使 用 UTF-8 进行 编码 ,并 使 用 相同 编码 方式 保存 HTML 文件 。 

全 提示 : HTML5 中 推荐 使 用 UTF-8 进行 编码 。 

(2) 关键 字 描 述 。 可 以 通过 如 下 语句 向 搜索 引擎 说 明 网 页 的 关键 字 : 

<meta ”name= "keywords" ”content= "关键 词 1, 关 键 词 2"/> 

不 同 关键 字 使 用 逗号 进行 隔 开 。 如 对 一 个 计算 机 教育 相关 网 站 ,可 在 网 页 中 给 出 : 


<meta ”name= "keywords" ”content=" 教 育 , 计 算 机 "/> 


“© 
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侠 提 示 : 一 meta> 设 置 关 键 字 曾经 是 搜索 引擎 排名 的 重要 隐私 ,但 是 现在 已 经 被 大 
多 搜索 引擎 忽略 ,因此 设置 一 meta 二 关键 字 对 网 页 排名 影响 较 小 。 

(3) 页 面 描述 。 过 meta 二 的 description 元 标签 是 对 一 个 网 页 概况 的 描述 ,这 些 信息 
可 能 会 出 现在 搜索 结果 中 ,因此 需要 根据 网 页 的 实际 情况 来 设计 ,尽量 避免 与 网 页 内 容 不 
相关 的 描述 。 页 面 描述 格式 如 下 : 

<meta name="description" ”content= "网 页 的 简介 "/> 

(4) 页 面 跳 转 。 志 meta 二 标记 可 以 设置 网 页 自动 刷新 ,格式 如 下 : 

<meta http- equiv= "Refresh" content= "间隔 的 秒 数 :url= 要 跳 转 的 网 站 "> 


其 中 url 是 可 省 略 的 属性 , 当 url 属性 省 略 时 ,网 页 只 进行 刷新 ,不 跳 转 。 如 下 面 
例子 : 


<meta http- equiv= "Refresh" content= "10;url=http://www.baidu.com"> 
此 时 ,网 页 10 秒 将 跳 转 至 百度 页 面 。 而 下 面 语句 : 

<meta http- equiv= "Refresh" content= "10"> 

完成 每 10 秒 刷新 页 面 。 

3. 二 base 二 标签 

过 base> 为 页 面 上 的 所 有 链接 规定 默认 地 址 或 默认 目标 。 

例如 : 


<basehref= "http://www.baidu.com">< /base> 
<base target=" blank" /> 


上 述 语句 设置 了 网 页 中 超 链 接 的 默认 地 址 为 百度 ,并 设置 超 链接 的 默认 打开 方式 为 
在 新 网 页 中 打开 。 
4. 二 link 二 标签 


去 link 二 用 于 链接 外 部 文件 ,例如 样式 表 等 。 


<head> 


<link rel= "stylesheet" type= "text/css"href="index.css" /> 
</head> 


213 主体 内 容 


网 页 显示 的 主体 内 容 是 一 body 之 元 素 包含 的 内 容 。 所 body> 元 素 出 现在 一 head 二 
元 素 之 后 ,用 于 标记 网 页 的 主体 ,body 元 素 包 含 文档 的 所 有 内 容 ( 比 如 文本 、 超 链接 、 图 
像 、 表 格 和 列表 ) 等 等 。 


body 标签 中 可 用 的 属性 如 下 。 





<body 
bgcolor= "背景 颜色 " 


第 2 章 HIM5 结 构 与 基础 语法 





background= "背景 图 片 " 
text= "文本 颜色 " 
link= "连接 文件 颜色 " 
vling= "访问 过 的 文本 颜色 " 
alink= "激活 的 链接 文本 " 
leftmargin= "左边 距 " 
rightmargin= "右边 距 " 
topmargin= "上 边 距 " 
bottommargin= "下 边 距 " 

秘 

页 面 的 主体 部 分 

</body> 


2.2 HTMLS 基本 语法 


221 标记 语法 

1. 标记 

标记 是 由 一 个 起 始 标记 (Opening Tag) 和 一 个 结束 标记 (Ending Tag) 所 组 成 的 ,其 

<x*> 受 控 文字 < /x> 

其 中 ,x 代表 标记 名 称 。 二 x 二 和 三 /x 二 就 如 同一 组 开关 : 起 始 标 记 二 x 二 为 开启 
(ON) 的 某 种 功能 ,而 结束 标记 二 /x 二 (通常 为 起 始 标 记 加 上 一 个 斜 线 /) 为 关 (OFF) 功 
能 , 受 控制 的 文字 信息 便 放 置 在 两 标记 之 间 。 

例如 : 

<p> 这 是 一 个 段落 < /p> 

标记 之 中 还 可 以 附加 一 些 属性 (Attribute) ,用 来 完成 某 些 特殊 效果 或 功能 。 

例如 : 

<x al="v1",a2="mv2",...,an= "mn"> 受 控 文字 < /x> 


其 中 ,al,a2,... ,an 为 属性 名 称 ,而 v1,v2,... ,vn 则 是 其 所 对 应 的 属性 值 ,属性 值 
加 不 加 引号 ,目前 所 使 用 的 浏览 器 都 可 接受 ,但 依据 W3C 的 新 标准 ,属性 值 是 要 加 引号 
的 ,所 以 最 好 养 成 加 引号 的 习惯 。 


侠 提 示 : 标记 可 以 包含 标记 , 即 标记 可 以 成 对 膏 套 ,但 是 不 能 交叉 地 谈 套 。 下 面 的 
代码 就 是 错误 的 : 
<B><I> 这 是 错误 的 交叉 罕 套 代码 </B>< /I> 


二 注意 :, HTML5 中 ,标记 不 区 分 大 小 写 。 
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2. 空 标记 
虽然 大 部 分 的 标记 都 是 有 开始 和 结束 的 ,但 也 有 一 些 是 单独 存在 的 。 这 些 单独 存在 
的 标记 称 为 空 标记 (Empty Tags) 。 其 语法 为 : 


<x> 

同样 , 空 标记 也 可 以 附加 一 些 属性 (Attribute) ,用 来 完成 某 些 特殊 效果 或 功能 。 
例如 : 

<X al= "vl"va2= "v2",...,an= "vn"> 


W3C 定义 的 新 标准 (XHTML1. 0/HTML4. 0) 建 议 : 空 标 记 应 以 /结尾 , 即 二 X/ 二 ， 
如 果 附 加 属性 则 为 二 x al=="v1",a2=="v2",... ,an 一 "vn" /之 。 

目前 所 使 用 的 浏览 器 对 于 空 标记 后 面 是 否 要 加 /并 没有 严格 要 求 , 即 在 空 标记 最 后 没 
有 加 /, 不 影响 其 功能 。 但 是 如 果 和 看 望 你 的 文件 能 满足 最 新 标准 ,那么 最 好 加 上 /。 
222 属性 语法 

HTML 属性 一 般 都 出 现在 HTML 标签 中 ,HTML 属性 是 HTML 标签 的 一 部 分 , 标 
签 可 以 有 属性 , 它 包 含 了 额外 的 信息 。 属 性 的 值 一 般 要 在 双 引号 中 。 

标签 可 以 拥有 多 个 属性 。 属 性 由 属性 名 和 值 成 对 出 现 。 

狂 注 意 , HTML5 中 ,属性 值 不 放 在 双 引 号 中 也 是 正确 的 。 例 如 ,以 下 两 行 代码 效 
果 完 全 相同 : 

<hl align= "center"> 标 题 1< /hl> 

<hl align= center> 标 题 1< /hl> 


一 个 标签 可 以 有 多 个 属性 ,属性 之 间 由 空格 隔 开 ,格式 如 下 : 

< 标签 名 属性 名 1= "属性 值 " 属性 名 2=" 属 性 值 ".…. 属性 名 N=" 属 性 值 ">< /标签 名 > 
例如 : 

<p align= center style= "font- size:18px;color:red; "> 大 家 好 !< /p> 

// 设 置 段 落 居中 对 齐 , 字 体 大 小 为 18 像素 ,字体 颜色 为 红色 

在 HTML5 中 ,部 分 标签 属性 的 属性 值 可 省 略 , 如 以 下 代码 : 


< input checked type= "checkbox"/> 
< input readonly type= "text"/> 


其 中 ,checked 王 "checked" 省 略为 checked,readonly 王 "readonly" 省 略为 readonly。 
在 HTML5 中 ,可 以 省 略 的 属性 值得 属性 如 表 2-1 所 示 。 
表 2-1 HTMLS 可 省 略 属性 值 的 属性 
属 性 省 略 属 性 值 
checked 等 价 于 checked 一 "checked" 

















第 ce 章 “HM5 结 构 与 基础 语法 NAN 
































续 表 
属 性 省 略 属性 值 
readonly 等 价 于 readonly 二 "readonly" 
defer 等 价 于 defer 一 "defer" 
ismap 等 价 于 ismap 二 "ismap" 
nohrefselected 等 价 于 nohref 一 "nohref" 等 价 于 selected 一 "selected" 
disabled 等 价 于 disabled 一 "disabled" 
multiple 等 价 于 multiple 一 "multiple" 
noresize 等 价 于 noresize 一 "noresize" 
2.3 注释 


我 们 经 常 要 在 一 些 代码 中 做 一 些 HTML 注释 ,这 样 做 的 好 处 很 多 ,比如 ,方便 项 目 
组 里 的 其 他 程序 员 了 解 你 的 代码 ,而 且 可 以 方便 以 后 你 对 自己 代码 的 理解 与 修改 等 。 

可 以 在 HTML 文档 中 加 入 自己 的 注释 。 注 释 不 会 显示 在 页 面 中 , 它 可 以 用 来 提醒 
网 页 设计 人 员 回 忆 相 关 的 程序 信息 。 注 释 行 的 写法 如 下 : 


< !-- 这 段 代码 主要 用 于 - -> 
.多 注意 : 在 感叹 号 后 要 接 两 个 连 字符 ,大 于 号 前 也 要 有 两 个 连 字 符 。 有 些 浏览 器 会 
对 此 进行 严格 检查 。 例 如 ， 


<body> 
<div class= "divcss">< /div> 
<!--css 选择 器 为 divcss 样式 --> 
< /body> 


2.4 编写 与 命名 规范 


24.1 编写 规范 
(1) 推荐 使 用 HTML5 的 文档 声明 : 
< IDOCTYPE HTML> 


(2) 必须 声明 文档 的 编码 charset, 且 与 文件 本 身 编码 保持 一 致 ,推荐 使 用 UTF-8 
编码 : 


<meta charset="utf- 8"> 


(3) 书写 注释 ,方便 程序 开发 。 注 释 方式 : 
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<!-- 注 释 --> 
(4) 标签 一 定 要 正确 嵌 套 ,标签 一 定 要 闭合 。 
242 命名 规范 
对 HTML 文件 的 命名 要 注意 以 下 几 点 : 
(1) 文件 的 扩展 名 为 . htm 或 . html, 建 议 统一 使 用 . html 作为 文件 名 的 后 级 。 
(2) 文件 名 中 只 可 由 英文 字母 .数字 或 下 画 线 组 成 。 


(3) 文件 名 中 不 要 包含 特殊 符号 ,比如 空格 、$ 等 。 
(4) 文件 名 区 分 大 小 写 。 


下 面 给 出 常用 命名 : 

index. html 首页 events. html 大 事 记 
sitemap. html 网 站 地 图 business. html 商务 合作 
passport. html 通行 证 contract. html 服务 条 款 
rank. html 排行 榜 privacy. html 隐私 声明 
roll. html 深 动 新 闻 CSR. html 企业 社会 责任 
solution. html 解决 方案 news- 开 头 . html 新 闻 相 关 
joinus. html 加 入 我 们 article- 开 头 . html 资讯 相关 
partner. html 合作 伙伴 picture- 开 头 . html 图 片 相 关 
service. html 服务 photo- 开 头 . html 相册 相关 
aboutus. html 关于 我 们 product 开 头 . html 产品 相关 
contact. html 联系 我 们 goods- 开 头 . html 商品 相关 
company. html 公司 介绍 system- 开 头 . html 系统 相关 
organization. html 组 织 结构 tag- 开 头 . html tag 相关 
culture. html 企业 文化 brand- 开 头 . html 品牌 相关 
strategy. html 发 展 策略 member- 开 头 . html ”会 员 相关 
honor. html 公司 荣誉 search- 开 头 . html 搜索 相关 
aptitudes. html 企业 资质 


2.5 上 机 练习 


本 节制 作 一 个 简单 的 HTML5 页 面 。 例 2-2 具体 步骤 如 下 : 
步骤 1: 打开 笔记 本 ,输入 以 下 代码 : 


<!-- 例 2-2--> 
< !DOCTYPE html> 
<html> 
<head> 
<title> 第 一 个 网 页 < /title> 
<meta charset= "utf- 8" /> 
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</head> 
<body> 
<h2 align= "center"> 唐 诗 欣 赏 < /h2> 
<hr color="# 00ffee"> 
<p align= "center"> 静 夜 思 < /p> 
<p align= "center"> 李 白 < /p> 
<p align= "center"><b> 床 前 明月 光 ,<br> 
疑 是 地 上 和 霜 。<br> 
举 头 望 明月 ,<br> 
低头 思 故 乡 。< /b>< /p> 
< img src="libai.jpg"/> 
< /body> 
</html> 


步骤 2: 将 文件 保存 为 1. html。 
步骤 3: 在 浏览 器 中 预览 网 页 效果 如 图 2-1 所 示 。 


六 @ 日 fleYWL/ 教 材 出 书 资料 /1Lhtm 寡 | 画 




















图 2-1 例 2-2 演示 效果 


2.6 本 章 小 结 


本 章 主要 讲解 了 HTML 的 基本 结构 和 基本 语法 。 重 点 内 容 如 下 : 
(1) HTML 文件 基本 结构 包含 三 大 部 分 ,其 中 : 

。 二 html、 二 /html 二 分 别 表示 一 个 HTML 文件 的 开始 和 结束 ; 
。 < 反 head>、 二 /head> 分 别 表示 文件 头 部 的 开始 和 结束 ; 

。 < 所 body> < 二 /body> 分 别 表 示 文 件 主体 的 开始 和 结束 。 
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(2) 一 body 二 二 /body> 是 HTML 文档 的 核心 部 分 ,在 浏览 器 中 看 到 的 任何 信息 都 
定义 在 这 个 标记 之 内 。 

(3) 用 DOCTYPE 声明 HTML 文档 ,建议 使 用 二 !IDOCTYPE html> 。 

(4) 主题 内 容 都 在 body 元 素 中 ,为 浏览 器 和 搜索 引擎 准备 的 指令 则 位 于 head 元 
素 中 。 


文字 与 段落 


文字 和 段落 是 网 页 中 最 重要 、 最 常用 的 元 素 。 学 习 本 章 的 目的 是 掌握 HTML5 文档 
文字 与 段落 的 处 理 ,包括 文字 内 容 文字 修饰 .段落 常用 标记 。 

本 章 重点 

。 掌握 HTML5 文档 中 文字 内 容 的 处 理 和 修饰 

。 掌握 段落 格式 的 设置 


3.1 文字 内 容 
网 页 的 内 容 主 要 是 通过 文字 来 体现 的 ,HTML5 中 提供 了 许多 与 文字 相关 的 标记 。 


3.1.1 标题 字 


标题 文字 标记 用 来 标示 页 面 中 的 标题 文字 ,被 标示 的 文字 将 以 粗 体形 式 显示 。 
HTML5 中 对 标题 文字 的 大 小 定义 了 六 级 二 hn 二 …< 王 /hn 之 。 二 hl> 定义 最 大 的 标题 。 
二 h6 定义 最 小 的 标题 。 它 们 需要 与 尾 标记 一 起 使 用 。 

语法 : 

<hn align= "left|center|right"> 标 题 文字 < /hn> 


其 中 align 属性 用 来 控制 标题 文字 的 对 齐 方式 : left 为 左 对 齐 ( 默 认 方式 );center 为 
居中 ;right 为 右 对 齐 。 
二 hn 放 … 达 /hn 二 的 应 用 如 例 3-1 所 示 。 


<!-- 例 3-1--> 
< ! DOCTYPE html> 
<html> 
<body> 
<hl> This is header 1< /hl> 
<h2> This is header 2< /h2> 
<h3> This is header 3< /h3> 
<h4> This is header 4< /h4> 
<h5>This is header 5< /h5> 
<h6>This is header 6< /h6> 
</body> 
</htm> 
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代码 运行 结果 如 图 3-1 所 示 。 





WE 
Ra 到 | 


> © Diey/E/code/practiceindex htm Er 


| This is header 1 


This is header 2 


This is header 3 








This is header 4 
This is header 5 


This is header 6 

















图 3-1 标题 字 实 例 演示 


3.12 添加 空格 


HTML 中 的 常用 字符 实体 是 不 间断 空格 (&nbsp;)。 
浏览 器 总 是 会 截 短 HTML 页 面 中 的 空格 。 如 果 在 文本 中 写 10 个 空格 ,在 显示 该 页 

面 之 前 ,浏览 器 会 删除 它们 中 的 9 个 。 如 需 在 页 面 中 增加 空格 的 数量 ,需要 使 用 &nbsp; 
添加 空格 的 应 用 如 例 3-2 所 示 。 


<1== 例 32==> 
<html> 
<head> 
<meta http- equiv= "Content- Type" content="text/html; charset=UTF- 8" /> 
<title> HTML 使 用 空格 符号 (snbsp;)< /title> 
< /head> 
<body> 
<p> 使 用 空格 缩 进 两 个 汉字 的 位 置 :< /p> 
<p> gnbsp; snbsp; gnbsp; snbsp; 两 个 空格 符号 表示 一 个 汉字 的 位 置 。 两 个 空格 符号 表示 一 个 
汉字 的 位 置 。 两 个 空格 符号 表示 一 个 汉字 的 位 置 。 两 个 空格 符号 表示 一 个 汉字 的 位 置 。 
</p> 
<p> 使 用 空格 缩 进 四 个 汉字 的 位 置 :< /p> 
<p> gnbsp; gnbsp; &nbsp; gnbsp; gnbsp; gnbsp; gnbsp; snbsp; 两 个 空格 符号 表示 一 个 汉字 的 位 
置 。 两 个 空格 符号 表示 一 个 汉字 的 位 置 。 两 个 空格 符号 表示 一 个 汉字 的 位 置 。 两 个 空格 
符号 表示 一 个 汉字 的 位 置 。< /p> 
< /body> 





</html> 
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文字 与 段落 


代码 运行 结果 如 图 3-2 所 示 。 
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使 用 空格 缩 进 两 个 汉字 的 位 置 : 


两 个 空格 符号 表示 一 个 汉字 的 位 置 。 两 个 空格 符号 
表示 一 个 汉字 的 位 置 。 两 个 空格 符号 表示 一 个 汉字 的 位 置 。 
两 个 空格 符号 表示 一 个 汉字 的 位 置 。 


使 用 空格 缩 进 四 个 汉字 的 位 置 : 
两 个 空格 符号 表示 一 个 汉字 的 位 置 。 两 个 


空格 符号 表示 一 个 汉字 的 位 置 。 两 个 空格 符号 表示 一 个 汉字 
的 位 置 。 两 个 空格 符号 表示 一 个 汉字 的 位 置 。 














图 3-2 空格 实例 演示 


3.13 添加 特殊 符号 


在 HTML 中 , 某 些 字符 是 预 留 的 。 
在 HTML 中 不 能 使 用 小 于 号 (二 ) 和 大 于 号 (二 ), 这 是 因为 浏览 器 会 误 认为 它们 是 


标签 。 


如 果 和 希望 正确 地 显示 预 留 字符 ,必须 在 HTML 源 代码 中 使 用 字符 实体 。 字 符 实体 
类 似 这 样 : & entity_name 或 者 中 上 #entity_number。 如 需 显 示 小 于 号 ,必须 写 为 &lt; 或 
&&#60。HTML 中 有 许多 有 用 的 字符 实体 ,如 表 3-1 所 示 。 


表 3-1 HTML 中 常用 的 字符 实体 





























显示 结果 描 述 实体 名 称 实体 编号 

六 小 于 号 &lt; 区 #60; 
大 于 号 Bgt; #62; 
& 和 号 &amp; #38; 

引号 Bquot; 区 #34; 

撤 号 &apos; (IE 不 支持 ) 下 #39; 
化 Ea Bcent; 玉 井 162; 
E 镑 &pound; #163; 
¥ 日 圆 Byen; #1653 
































续 表 
显示 结果 描 述 实体 名 称 实体 编号 
§ 节 Bsects & #167; 
© 版 权 Bcopy; 中 并 169; 
® 注册 商标 Bregs; #174; 
x 乘 号 Btimess BE#2153 
二 除 号 Bdivide; #2473 














命 提 示 : 实体 名 称 对 大 小 写 敏感 ! 
3.14 注释 标记 


注释 标签 二 comment 二 用 于 在 源 代 码 中 插入 注释 。 注 释 不 会 显示 在 浏览 器 中 。 

可 使 用 注释 对 代码 进行 解释 ,这 样 做 有 助 于 以 后 对 代码 的 编辑 。 当 编写 了 大 量 代 码 
时 尤其 有 用 。 

使 用 注释 标签 来 隐藏 浏览 器 不 支持 的 脚本 也 是 一 个 好 习惯 (这 样 就 不 会 把 脚本 显示 
为 纯 文 本 ) ,如 下 面 代码 所 示 。 


<camment> This text is a Comment< comment> 


<p> This is a regular paragraph< /p> 


3.2 文字 修饰 


321 粗 体 、 和 斜体 .下 男 线 


1. 粗 体 一 b 二 

<b> 标签 规定 粗 体 文本 。 

2. 斜体 二 这 

去 标签 显示 斜体 文本 效果 。 

去 i 人 标签 和 基于 内 容 的 样式 标签 二 em 之 类 似 。 它 告诉 浏览 器 将 包含 其 中 的 文本 以 
斜体 字 (italic) 或 者 倾斜 (oblique) 字 体 显示 。 如 果 这 种 斜体 字 对 该 浏览 器 不 可 用 的 话 ,可 
以 使 用 高 亮 、 反 白 或 加 下 夯 线 等 样式 。 

3. 下 画 线 二 ins 二 

<ins> 标签 定义 文档 的 其 余部 分 之 外 的 插入 文本 。 

综合 应 用 如 例 3-3 所 示 。 

<!-- 例 3-3--> 

< IDOCTYPE html> 

<html> 

<body> 
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<center><p><b> 粗 体 < /b><i> 斜 体 <i/>< /p><center/> 
<center><p> 一 打 有 <del> 二 十 < /del><ins> 十 二 </ins> 件 。< /p><center/> 
< /body> 
</html> 


代码 运行 结果 如 图 3-3 所 示 。 
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图 3-3 粗 体 ,斜体 \ 下 夯 线 效果 演示 


多 注意 : 一 i 二 标签 一 定 要 和 结束 标签 二 /i 结合 起 来 使 用 。 


322 删除 线 < del> 
二 del 二 标签 定义 文档 中 已 删除 的 文本 。 
323 上 标 和 下 标 


< 一 sup 二 标签 可 定义 上 标 文本 。 

包含 在 一 sup 二 标签 和 其 结束 标签 二 /sup 二 中 的 内 容 将 会 以 当前 文本 流 中 字符 高 度 
的 一 半 来 显示 ,但 与 当前 文本 流 中 文字 的 字体 和 字号 都 是 一 样 的 。 

二 sub 标签 可 定义 下 标 文 本 。 

包含 在 二 sub> 标签 和 其 结束 标签 过 /sub> 中 的 内 容 将 会 以 当前 文本 流 中 字符 高 
度 的 一 半 来 显示 ,但 与 当前 文本 流 中 文字 的 字体 和 字号 都 是 一 样 的 。 

上 标 和 下 标的 应 用 如 例 3-4 所 示 。 


<!-- 例 3-4--> 
< IDOCTYPE html> 
<html> 
<head> 
<title><address> 标 签 < /title> 
</head> 
<body> 
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这 段 文本 包含 <sub> 下 标 < /sub> 
这 段 文本 包含 <sup> 上 标 < /sup> 
X1+Y2< sup> 2< /sup>=15 
</body> 
</html> 


代码 运行 结果 如 图 3-4 所 示 。 

















ES = > 
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这 段 文本 包含 下 标 
这 段 文本 包含 上 标 
X1+Y22=15 














图 3-4 上 标 和 下 标 效果 演 示 


全 提示 : 无 论 是 一 sub> 标 签 还 是 与 它 对 应 的 一 sup> 标 签 ,在 数学 等 式 、 科 学 符号 
和 化 学 公式 中 都 非常 有 用 。 
324 设置 地 址 文字 


二 address 记 标签 定义 文档 或 文章 的 作者 、 拥 有 者 的 联系 信息 。 

如 果 二 address 二 元 素 位 于 二 body 二 元 素 内 , 则 表示 文档 的 联系 信息 。 

如 果 二 address 志 元素 位 于 二 article 志 元 素 内 , 则 表示 文章 的 联系 信息 。 

二 address 元 素 中 的 文本 通常 呈现 为 斜体 。 大 多 数 浏览 器 会 在 address 元 素 前 后 添 


加 折 行 。 
设置 地 址 文字 的 应 用 如 例 3-5 所 示 。 


<!-- 例 3-5--> 
< !DOCTYPE html> 
<html> 
<head> 
<title><address> 标 签 < /title> 
</head> 
<body> 
<address> 
Written by HIML5<br /> 
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<a href= "mailto:us@ example.org"> Email us</a><br /> 
Address: Box 564, Disneyland<br /> 
Phone: +12 34 56 78 

</address> 


代码 运行 结果 如 图 3-5 所 示 。 
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Written by HIMLS 
Laail_us 

Address: Box 9004, 
Disneyland 

Phone: +12 34 56 78 


图 3-5 设置 地 址 文字 效果 演示 


























全 提示 : 一 address> 标 签 不 应 该 用 于 描述 通信 地 址 ,除非 它 是 联系 信息 的 一 部 分 。 


3.3 段 落 


331 段落 标记 

一 P>…<</P>> 定 义 了 一 个 段 ,是 一 种 块 级 标记 ,其 结尾 标签 可 以 省 略 。 不 过 在 使 用 
浏览 器 的 样式 表单 时 为 了 避免 出 现 差错 ,还 是 建议 使 用 结尾 标签 。 

侠 提 示 : 决 级 标记 是 相对 于 行内 标记 来 讲 的 ,可 以 换行 ,而 行内 标记 中 的 内 容 默 认 
排列 方式 是 同行 排列 ,直到 宽度 超出 包含 其 容器 宽度 时 才 自 动 换行 。 

段落 标记 <P 的 应 用 如 例 3-6 所 示 。 


<!-- 例 3-6--> 
< IDOCTYPE html> 
<html> 
<head> 
<title> 网 页 标题 < /title> 
<meta charset=utf- 8" /> 
</head> 
<body> 


这 是 我 的 第 一 个 段落 
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<P> 我 是 段落 内 容 </P> 
<P> 第 二 个 段落 < /P> 
</body> 
</html> 


332 换行 标记 


使 用 =P 二 标记 分 段 时 ,在 段落 之 间 有 一 空 行 。 如果 不 希望 出 现 空 行 ,可 以 使 用 
去 br 换行 标记 。 当 浏览 器 遇 到 二 br> 标 记 时 会 另 起 一 行 ,中 间 不 插入 空 行 。 


333 居中 标记 


居中 标记 过 center 之 用 于 对 其 所 包括 的 文本 进行 水 平 居 中 。 
居中 标记 过 center 盖 的 应 用 如 例 3-7 所 示 。 


<!-- 例 3-7--> 
< !DOCTYPE html> 
<html> 
<head> 
<title> 段 落 居 中 < /title> 
</head> 
<body> 
<center> 这 段 文字 是 居中 的 < /center> 
</body> 
</html> 


代码 运行 结果 如 图 3-6 所 示 。 


EE 一 o 
自若 局 中 “\E 
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这 段 文 字 是 居中 的 


























图 3-6 居中 标记 效果 演示 


334 水 平分 隔 线 
水 平 线 标记 一 hr 二 语法 为 : 


<hr 属性 = 属性 值 > 
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浏览 器 遇 到 水 平 线 标记 ,会 在 页 面 上 画 出 一 条 水 平 线 。 水 平 线 可 以 把 页 面 分 成 几 部 
分 ,使 页 面 内 容 更 加 清晰 醒目 。 志 hr> 标 记 的 属性 用 来 控制 水 平 线 的 样式 ,常用 的 属性 如 
表 3-2 所 示 。 
表 3-2 一 hr 二 标记 的 属性 

















属 性 功 能 示 例 
size 水 平 线 的 粗细 ,以 像素 为 单位 ,默认 值 是 1 <hr size=6> 
了 水 平 线 的 宽度 ,可 以 以 像素 为 单位 ,也 可 以 用 对 屏幕 的 百 分 | <hr width 一 10 过 

比 表示 ,默认 值 为 100% 一 hr width=100%> 
关 水 平 线 对 齐 方式 ,可 取 值 为 : left、center 或 right, 默认 值 < lon ib 

是 center 

二 hr color= "red"> 

| 的 用 全 一 hrcolor 一 # FFFFFF> 
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去 pre> 元 素 可 定义 预 格式 化 的 文本 ,使 HTML 文档 中 的 空格 、 制 表 符 、 回 车 换行 符 
起 作用 。 二 pre 志 元素 中 的 文本 通常 会 保留 空格 和 换行 符 , 而 文本 也 会 呈现 为 等 宽 字体 。 
常 应 用 于 表示 计算 机 的 源 代码 。 

三 pre 志 元素 中 允许 的 文本 可 以 包括 物理 样式 和 基于 内 容 的 样式 变化 ,还 有 和 链接、 图 
像 和 水 平分 隔 线 。 当 把 其 他 标签 (比如 二 a 二 标签 ) 放 到 一 pre 之 块 中 时 ,就 像 放 在 
HTML/XHTML 文档 的 其 他 部 分 中 一 样 即 可 。 

预 格式 化 标记 二 pre 二 的 应 用 如 例 3-8 所 示 。 


<body> 

<pre> 
这 是 
预 格式 文本 
它 保留 了 空格 
和 换行 。 

</pre> 

<p> 用 pre 实 现 的 漂亮 文字 图 案 :< /p> 

<pre> 
ry | | 
LT ley | 
| 本 
Leatl alle Le 41 
国史 本 本 本 本 硬 国 呈 | | 1 | 1 
7 \ 7 \ \ 


本 节 给 出 一 


结果 如 图 3-7 所 示 。 
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= EE 
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Ql 三 








这 是 

预 格式 文本 。 

它 保留 了 空格 
和 换行 


用 pre 实 现 的 漂亮 文字 图 案 : 


| 人 一 11 人 ”11 一 1 
| 11 
Rd Ml Wd Wd Me J 

















图 3-7 预 格 式 化 标记 效果 演示 


3.4 上 机 练习 


个 唐诗 欣赏 的 页 面 ,在 这 个 实例 中 ,综合 运用 本 章 所 介绍 的 标记 对 普通 文 
字 和 段落 进行 格式 化 。 


步骤 1: 打开 Sublime Text, 新 建 一 个 HTML 文件 ,输入 以 下 代码 : 


<!-- 例 3-9--> 
< IDOCTYPE html> 


<html> 


<head> 


<title> 文 字段 落网 页 < /title> 


</head> 


<body> 


<h2 aligqn= center> 唐 诗 欣 赏 < /h2> 


<hr width="100% " size= "lw color="# 00ffee"> 
<p align="™ 
<p align="™ 


<p align= "center"><b> 床 前 明月 光 ,<br> 


疑 是 地 上 霜 。<br> 
举 头 望 明月 ,<br> 


center"><b>< font size="3"> 静 夜 思 < /font>< /b>< /p> 


center"><font size="2"> 李 白 </font>< /p> 
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低头 思 故 乡 。< /b>< /p> 

<P> gnbsp;< /p> 

<hr width="100%" size= "1" color="# 00ffee"> 

<p><font class= "text"><b>【 简 析 】< /b><br>< /font>< /p> 

<p> &nbsp; gnbsp; gnbsp; &nbsp; 这 是 写 远 客 思乡 之 情 的 诗 , 诗 以 明白 
如 话 的 语言 雕琢 出 明 静 醉人 的 秋 夜 的 意境 。 它 不 追求 想象 的 新 颖 奇特 ,也 
气 弃 了 辞藻 的 精工 华美 ;<br> 它 以 清新 朴素 的 笔触 ,抒写 了 丰富 深 曲 的 
内 容 。 境 是 境 , 情 是 情 , 那 么 逼真 ,那么 动人 , 百 读 不 厌 , 耐 人 寻味 。 
无 怪 乎 有 人 赞 它 是 “ 妙 绝 古 今 ”。 

</p> 

<hr width= "400" size="3" color= "#00ee99" align= "left"> 
版 权 gcopy; :版 权 所 有 , 违 者 必 究 

<address>E-mail:limingwei@ gmail .com< /address> 





< /body> 
</html> 
步骤 2: 在 浏览 器 中 预览 ,效果 如 图 3-8 所 示 。 
| /Dr xx 加 本 -°° En 
字 |= 
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【 简 析 3 


这 是 写 远 容 思乡 之 情 的 诗 ， 诗 以 明白 如 话 的 语言 内 琢 出 明 静 醉人 的 秋 夜 的 意境 。 它 不 追求 想象 的 新 颖 奇特 ， 也 握 弃 了 辞藻 的 


这 : 
精工 华美 
Ev. 抒写 了 丰富 深 曲 的 内 容 。 境 是 境 ， 情 是 情 ， 那 么 逼真 ， 那 么 动人 ， 百 读 不 厌 ， 耐 人 寻味 。 无 坚 昱 有 人 赞 它 
绝 十 今 ”。 














版 权 @: 版 权 所 有 ， 违 者 必 究 


Bmai1: lininewei@smail. com 














图 3-8 综合 实例 演示 效果 


3.5 本 章 小 结 


文字 与 段落 是 页 面 排版 的 重点 ,也 是 网 页 的 基础 部 分 ,可 以 通过 HTML 标记 实现 对 


文字 和 段落 的 格式 化 。 
本 章 主要 讲解 了 HTML 文字 与 段落 的 格式 设置 ,主要 内 容 包括 文字 内 容 标记 、 文 字 
修饰 标记 、 段 落 修饰 标记 的 使 用 。 


(1) 在 浏览 器 显示 的 文字 内 容 编 写 在 居 body 之 和 所 /body> 标 记 之 间 , 内 容 包括 普通 
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的 文字 ,空格 符号 和 特殊 符号 以 及 页 面 的 注释 语句 ,标题 字 标记 过 h> 在 HTML 中 ,定义 
了 六 级 标题 。 


(2) 文字 修饰 标记 可 实现 网 页 文字 的 斜体 、 加 粗 、. 上 标 、 下 标 、 大 小 字号 、 下 面 线 、 删 除 
线 , 等 宽 、 地 址 等 设置 。 


(3) 段落 格式 设置 可 实现 段落 对 齐 方式 ,换行 、 预 格式 化 ,水 平 线 设置 .换行 等 设置 。 


超 链 接 


HTML 文件 中 最 重要 的 应 用 之 一 就 是 超 链接 。 超 链接 就 是 当 鼠 标 单 击 一 些 文字 、 图 
片 或 其 他 网 页 元 素 时 ,浏览 器 会 根据 其 指示 载 人 一 个 新 的 页 面 或 跳 转 到 页 面 的 其 他 位 置 。 
超 链 接 除 了 可 链接 文本 外 ,还 可 链接 各 种 媒体 文件 ,如 声音 、 图 像 .动画 ,通过 这 些 进入 丰 
富 多 彩 的 多 媒体 世界 。 

本 章 重点 

。 理解 相对 路 径 和 绝对 路 径 

。 掌握 文字 链接 

。 掌握 图 片 链接 

。 理解 锚 点 的 使 用 

。 了解 邮 箱 地 址 链接 


4.1 起 链接 简介 


超 链接 是 指 从 一 个 网 页 指向 另 一 个 目标 的 连接 关系 ,这 个 目标 可 以 是 男 一 个 网 页 ,也 
可 以 是 相同 网 页 上 的 不 同位 置 ,还 可 以 是 一 张 图 片 一 封 电子 邮件 一 个 文件 ,甚至 是 一 个 
应 用 程序 。 超 链接 在 本 质 上 属于 网 页 的 一 部 分 , 它 为 Web 站 点 提供 了 最 重要 的 交互 措 
施 ,使 网 络 不 限于 特定 的 地 理 位 置 ,只 要 鼠标 一 点 ,就 可 以 到 达 全 球 任意 一 个 站 点 。 


4.2 ”创建 超 链接 
在 HTML5 中 建立 超 链 接 所 使 用 的 标记 为 <a 之 一 /a>。 超 链接 有 两 个 最 重要 的 属 
性 ,设置 为 超 链接 的 网 页 元 素 和 超 链接 指向 的 目标 地 址 。 超 链接 的 基本 结构 如 下 


<a href=URL> 网 页 元 素 < /a> 


421 相对 路 径 和 绝对 路 径 


一 个 站 点 中 通常 有 以 下 两 种 类 型 的 文件 路 径 。 

1. 绝对 路 径 

绝对 路 径 就 是 你 的 主页 上 的 文件 或 目录 在 硬盘 上 真正 的 路 径 , 例 如 ,你 的 程序 是 存放 
在 C:/HTML5/index. html 下 的 .那么 C:/HTML5/index. html 就 是 index. html 的 绝对 
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路 径 。 在 网 络 中 ,以 http 开头 的 链接 都 是 绝对 路 径 , 例 如 ,http://www. march. com/ 
support/contents. html 就 是 一 个 绝对 路 径 。 当 然 不 是 任何 时 候 都 需要 使 用 绝对 路 径 , 对 
于 本 地 链接 来 讲 ,使 用 绝对 路 径 就 不 是 最 好 的 方式 ,因为 一 旦 将 此 站 点 移动 到 其 他 域 , 则 
所 有 本 地 绝对 路 径 都 将 断 开 。 其 次 , 当 插 入 图 像 时 ,如 果 使 用 图 像 的 绝对 路 径 ,而 图 像 又 
驻 留 在 远程 服务 器 而 不 在 本 地 硬盘 驱动 器 , 则 将 无 法 在 文档 窗口 中 查看 该 图 像 。 此 时 ,就 
必须 在 浏览 器 中 预览 该 文档 才能 看 到 它 。 绝 对 路 径 一 般 在 程序 的 路 径 配 置 中 经 常用 到 ， 
而 在 实际 制作 网 页 中 很 少 使 用 。 

2. 相对 路 径 

相对 路 径 又 称 文档 相对 路 径 , 是 指 省 略 掉 当 前 文档 和 所 链接 的 文档 都 相同 的 绝 
对 URL 部 分 ,而 只 提供 不 同 的 路 径 部 分 。 如 support/contents. html 就 是 一 个 相对 
路 径 。 

相对 路 径 对 于 大 多 数 Web 站 点 的 本 地 链接 来 说 ,是 最 适用 的 路 径 。 在 当前 文档 与 所 
链接 的 文档 处 于 同一 文件 内 ,上 且 可 能 继续 保持 这 种 状态 的 情况 下 ,文档 相对 路 径 就 显得 特 
别 有 用 。 文 档 相 对 路 径 还 可 用 来 链接 到 其 他 文件 夹 中 的 文档 ,方法 是 利用 文件 夹 的 层次 
结构 ,指定 从 当前 文档 到 所 链接 的 文档 的 路 径 。 

绝对 路 径 和 相对 路 径 的 区 别 说 明 如 下 。 

假设 所 建立 的 Web 站 点 目录 路 径 如 图 4-1 所 示 。 



























































http://localhost/ | Dirl SubDirl Refl.html 
SubDir? | BeRefl.eif 

Dir2 BeRef?2.html 
| savpir3 一 | Rer2himl 


图 4-1 Web 站 点 目录 路 径 


用 表 4-1 来 说 明 图 4-1 的 情况 下 , 某 文件 引用 另 一 文件 时 ,所 应 使 用 的 相对 路 径 与 绝 
对 路 径 的 区 别 。 


表 4-1 绝对 路 径 与 相对 路 径 的 对 比 

















引用 者 被 引用 者 绝对 路 径 相对 路 径 
Refl. html BeRefl. gif Dirl/SubDir2/BeRefl1. gif ../SubDir2/BeRef1. gif 
Ref2. html BeRefl. gif Dirl/SubDir2/BeRefl. gif ../../Dirl/SubDir2/BeRefl. gif 
Refl. html BeRef2. html Dir2/BeRef2. html ../../Dir2/BeRef2. html 
Ref2. html BeRef2. html Dir2/BeRef2. html .. /BeRef2. html 














潮 广 意 : ". "代表 上 一 层 目 录 , 而 ".. /../" 所 代表 的 是 上 一 层 目 录 的 上 一 层 目 录 。 
所 以 ,从 表 4-1 中 可 以 看 出 ,如 果 引 用 的 文件 存在 于 目前 目录 的 子 目录 中 ,或 者 存在 于 上 
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一 层 目 录 的 另 一 个 子 目录 中 ,运用 相对 路 径 是 比较 方便 的 。 如 果 不 是 时 , 则 干脆 利用 绝对 
路 径 , 还 比较 省 事 。 另 外 , 当 被 引用 的 是 同一 个 文件 时 ,引用 文件 所 使 用 的 绝对 路 径 是 一 
样 的 。 

422 内 部 链接 


内 部 链接 是 指 超 链接 的 链接 对 象 是 在 同一 个 网 站 中 的 资源 。 与 自身 网 站 页 面 有 关 的 
链接 称 为 内 部 链接 。 

假设 想 要 在 网 页 1 中 点 击 超 链 接 就 跳 转 到 网 页 2 或 者 网 页 3, 这 就 是 “内 部 链接 ”, 因 
为 这 3 个 网 页 都 是 在 同一 个 网 站 内 的 。 内 部 链接 的 链接 对 象 是 在 同一 个 网 站 的 。 

语法 形式 如 下 。 

< 上 -下 一 行 代码 表示 设置 内 部 链接 --> 

<a href="../imgs/123.png">< /a> 


423 外 部 链接 


外 部 链接 是 指 本 站 以 外 的 链接 ,表达 的 是 网 站 之 间 的 链接 关系 ,是 针对 搜索 引擎 的 友 
情 链 接 。 高 质量 的 外 部 链接 指 与 自身 网 站 建立 链接 的 网 站 知名 度 高 ,访问 量 大 ,同时 相对 
的 外 部 链接 较 少 ,有 助 于 快速 提升 自身 的 网 站 知名 度 和 排名 的 网 站 。 

语法 形式 如 下 : 

<!-- 下 一 行 代码 表示 设置 外 部 链接 --> 


<a href= "www.baidu.com">< /a> 


4.3 链接 对 象 


43.1 文字 链接 


设置 超 链 接 的 网 页 元 素 通 常 使 用 文本 。 文 本 超 链接 是 通过 二 a 二 二/a 二 标记 来 实现 
的 ,将 文本 放 在 二 a 二 开始 标记 和 二 /a 二 结束 标记 之 间 , 即 可 建立 超 链接 ,语法 形式 如 下 。 


<!-- 下 一 行 代码 表示 设置 文字 链接 - -> 
<a href=""> 文 字 内 容 < /a> 


应 用 实例 如 例 4-1 所 示 。 


<!-- 例 4-1--> 
< IDOCTYPE html> 
<html lang= "en"> 
<head> 
<meta charset= "UTF- 8"> 
<title> 文 字 的 超 链接 < /title> 
</head> 
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<body> 
<ahre 全 "1L.html"> 文 字 链 接 </a><br> 
</body> 
</html> 


在 浏览 器 中 预览 网 页 效果 如 图 4-2 所 示 。 

















pr 西 - 口 X 
/ 口 文字 的 直 内 接 x VE 
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文字 链接 








图 4-2 文字 链接 演示 效果 


432 图 片 链接 


图 片 链接 ,顾名思义 就 是 对 图 片 设置 的 超 链 接 。 图 片 链接 的 建立 和 文字 超 链 接 的 建 
立 基本 类 似 ,都 是 通过 二 a 二 二 /a 二 链接 标记 来 实现 的 。 只 需要 把 原来 的 链接 文字 换 成 相 
应 的 图 片 。 

语法 形式 如 下 : 


< 二 -下 一 行 代码 表示 设置 图 片 链接 - -> 


<a href= "">< jimg src=""></a> 
应 用 实例 如 例 4-2 所 示 。 


<!-- 例 4-2--> 
< !DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF- 8"> 
<title> 图 片 的 超 链 接 < /title> 
</head> 
<body> 
<a href="]1.html"><img src="pic.jpg"></a><br> 


点 击 该 图 片 放大 
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</body> 
</html> 


在 浏览 器 中 预览 网 页 效果 如 图 4-3 所 示 。 





/中 图 片 的 超 迹 接 x 
会 3 © BD file///D/code/2.html | 二 

















点 击 该 图 片 放 大 











图 4-3 图 片 链接 演示 效果 


433 书签 链接 


书签 链接 又 称 为 锚 点 链接 ,属于 内 部 链接 的 一 种 , 它 的 链接 对 象 是 当前 页 面 的 某 一 个 
部 分 。 

有 些 网 页 由 于 内 容 比 较 多 ,导致 页 面 过 长 ,访问 者 需要 不 停 地 拖 动 浏览 器 上 的 滚动 条 
来 查看 文档 中 的 内 容 , 为 了 方便 用 户 查看 文档 中 的 内 容 , 可 以 在 文档 中 建立 书签 链接 。 

id 属性 常 被 用 于 创建 到 当前 页 面 ( 文 档 ) 内 部 的 链接 ,其 作用 类 似 于 书签 链接 
(anchor) 。 因 此 ,HTML5 中 将 用 于 制作 锚 点 的 二 a 二 的 属性 name 取消 了 。 书 签 链接 要 
设置 两 部 分 : 一 是 目标 锚 点 的 id 名 称 ;二 是 超 链 接 部 分 。 

例如 ,在 下 面 的 位 置 创建 一 个 内 部 链接 锚 点 位 置 的 链接 形式 如 下 : 


<a id- "tips"> 内 部 链接 锚 点 位 置 < /a> 
在 同一 个 文档 的 其 他 位 置 创建 一 个 到 * 内 部 链接 锚 点 位 置 ?的 链接 形式 如 下 : 
<a href=#tips"> 访 问 "内 部 链接 锚 点 位 置 "< /a> 


显示 出 来 的 结果 如 下 : 
访问 “内 部 链接 锚 点 位 置 
如 果 在 其 他 文档 中 ,还 需要 在 #tips 前 面 加 上 到 目标 文档 的 链接 地 址 : 


<a href="http://cnzhx.net/blog/html- links/#tips"> 访 问 "HTML 链接 "页 面 上 的 "内 部 链接 锚 点 
位 置 "< /a> 
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显示 结果 如 下 所 示 : 

访问 “HTML 链接 ”页面 上 的 “内 部 链接 锚 点 位 置 ” 

未: 

(1) 所 有 支持 id 属性 的 HTML 标签 都 可 以 作为 锚 点 ,直接 创建 到 该 锚 点 的 链接 就 
可 以 了 了 。 





<hl id= "hlanchor"> 标 题 一 < /hl> 
(2) 应 该 在 超 链接 中 写 入 链接 文本 ,如 下 例 中 的 “文本 ”两 字 : 
<a href= "http://cnzhx.net/blog/html- links/# "> 本 文 </a> 


3 注意 : 同一 个 页 面 内 部 不 能 有 重复 的 id 属性 值 。 
应 用 实例 如 例 4-3 所 示 。 


<!-- 例 4-3--> 
< !DOCTYPE html> 
<html lang= "en"> 
<head> 
<meta charset= "UTF- 8"> 
<title> 书 签 链接 < /title> 
</head> 
<body> 
<p> 
<a href="#C4"> 查 看 第 四 章 < /a> 
</p> 
<h2> 第 一 章 < /h2> 
<p> 本 章 讲解 文字 相关 知识 < /p> 
<h2> 第 二 章 < /h2> 
<p> 本 章 讲解 图 片 相关 知识 < /p> 
<h2> 第 三 章 < /h2> 
<p> 本 章 讲解 音乐 相关 知识 < /p> 
<h2><a id="c4"> 第 四 章 < /a>< /h2> 
<p> 本 章 讲解 美术 相关 知识 < /p> 
<h2> 第 五 章 < /h2> 
<p> 本 章 讲解 绘画 相关 知识 < /p> 
<h2> 第 六 章 < /h2> 
<p> 本 章 讲解 钢琴 相关 知识 < /p> 
<h2> 第 七 章 < /h2> 
<p> 本 章 讲解 汉字 相关 知识 < /p> 
<h2> 第 八 章 < /h2> 
<p> 本 章 讲解 吉祥 物 相关 知识 < /p> 
<h2> 第 九 章 < /h2> 
<p> 本 章 讲解 玉器 相关 知识 < /p> 


<h2> 第 十 章 < /h2> 
<p> 本 章 讲解 陶瓷 相关 知识 < /p> 


< /body> 


</html> 


在 浏览 器 中 预览 网 页 效果 如 图 4-4 所 示 。 
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第 二 章 
本 章 讲 外 图 片 相关 知识 
第 三 章 
本 章 讲解 音乐 相关 知识 
第 四 章 
本 章 讲解 美术 相关 知识 
第 五 章 
本 章 讲解 细 相关 知识 
第 六 章 


查看 第 四 意 和 
第 一 章 
本 章 讲解 文字 相关 知识 





单 击 页 


图 4-4 书签 链接 演示 效果 


面 中 的 链接 , 即 可 将 “第 四 章 ” 的 内 容 跳 转 到 页 面 顶部 ,如 图 4-5 所 
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示 。 
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第 四 重 
本 章 讲解 美术 相关 知识 
第 五 章 

本 章 讲 解 绘画 相 关 知识 
第 六 章 

本 章 讲解 钢琴 相关 知识 
第 七 章 

本 章 讲 解 汉字 相关 知识 
第 八 章 

本 章 讲解 吉祥 物 相关 知识 
第 九 章 





本 章 讲解 玉器 相关 知识 








4-5 书签 链接 跳 转 演示 效果 
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434 电子 邮件 链接 


好 的 站 点 总 在 不 断 地 自我 完善 和 提高 ,所 以 从 浏览 器 那里 及 时 获得 需要 的 意见 和 建 
议 是 非常 有 必要 的 。 很 多 情况 下 ,需要 将 网 站 管理 员 的 E-mail 地 址 保留 在 网 页 上 ,以 便 
及 时 获取 外 界 的 反馈 信息 ,这 时 就 需要 在 网 页 中 使 用 电子 邮件 链接 。 

电子 邮件 链接 是 一 种 特殊 的 链接 , 单 击 它 不 是 跳 转 到 相应 的 网 页 上 ,也 不 是 下 载 相应 
的 文件 ,而 是 启动 计算 机 中 相应 的 E-mail 程序 ,允许 书写 电子 邮件 ,然后 发 往 指定 地 址 。 

语法 形式 如 下 : 


< 二 -下 一 行 代码 表示 设置 电子 邮件 链接 - -> 
<a href= "邮箱 地 址 "> 我 的 邮箱 < /a> 


应 用 实例 如 例 4-4 所 示 。 


<!-- 例 4-4--> 
< !DOCTYPE html> 
<html lang= "en"> 
<head> 
<meta charset= "UTF- 8"> 
<title> 链 接 到 电子 邮箱 < /title> 
</head> 
<body> 
<a href= "13789319186 qq.com"> 我 的 邮箱 < /a><br> 
< /body> 
</html> 


在 浏览 器 中 预览 网 页 效果 如 图 4-6 所 示 。 
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图 4-6 电子 邮件 链接 演示 效果 
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435 ”FIP 链接 


在 HTML 中 要 链接 到 服务 器 ,就 可 以 使 用 FTP 链接 。FTP 链接 就 是 对 FTP 地 址 
设置 超级 链接 。FTP 链接 的 建立 和 文字 超 链接 的 建立 基本 类 似 , 都 是 通过 所 a> 一 /a> 
链接 标记 来 实现 的 。 只 需要 把 原来 的 链接 文字 换 成 相应 的 FTP 地 址 即 可 。 

语法 形式 如 下 : 

< !-- 下 一 行 代码 表示 设置 FTP 链 接 --> 

<a href="ftp:// 服 务 器 地 址 "> 显示 超 链 接 的 文字 < /a> 


436 下 载 文 件 链接 


网 页 除了 可 以 提供 信息 浏览 之 外 ,还 可 以 提供 资源 下 载 , 所 以 就 需要 下 载 链 接 。 

下 载 文件 的 链接 在 软件 下 载 网 站 或 源 代 码 下 载 网 站 中 应 用 得 较 多 。 下 载 文件 链接 的 
创建 方法 与 一 般 链 接 的 创建 方法 相同 ,只 是 所 链接 的 内 容 并 非 文字 或 网 页 ,而 是 一 个 
软件 。 

语法 形式 如 下 : 


<!-- 下 一 行 代码 表示 设置 下 载 链接 --> 
<a href= "下 载 软件 名 称 "> 显示 超 链接 的 文字 < /a> 


应 用 实例 如 例 4-5 所 示 。 


<!-- 例 4-5--> 
< !DOCTYPE html> 
<html lang= "en"> 
<head> 
<meta charset= "UTF- 8"> 
<title> 下 载 链接 < /title> 
</head> 
<body> 
<a href= "wrar.exe"> 解 压缩 文件 下 载 < /a><br> 
</body> 
</html> 


4.4 上 机 练习 


本 节制 作 一 个 简单 的 班级 网 站 导航 。 具 体 步骤 如 下 。 
步骤 1: 打开 笔记 本 ,输入 以 下 代码 : 


< IDOCTYPE html> 
<html lang="en"> 
<head> 
<title> 班 级 网 站 < /title> 
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<meta http- equiv= "Content- Type" content= "text/html; charset=-UTE- 8"> 


</head> 
<body> 
< table width ="900" border="0" align= "center" cellpadding="0" cellspacing= "0" > 
EE 
<td></td> 
<td ><a href= 啡 "> 首页 < /a>< /td> 
<td></td> 
<td><a href= 叶 "> 班级 新 闻 < /a>< /td> 
<td>< /td> 
<td><a href= 叶 "> 班级 相册 < /a>< /td> 
<td></td> 
<td><a href= 叶 "> 个 人 主页 < /a>< /td> 
<td></td> 
<td><a href= "只 "> 留言 本 </a>< /td> 
<td></td> 
<td><a href= 哮 "> 网 页 设计 < /a>< /td> 
<td>< /td> 
<td><a href= 只 "> 关于 我 们 </a>< /td> 
</tr> 
</table> 
< /body> 
</html> 


步骤 2: 将 文件 保存 为 four_html. html。 
步骤 3: 在 浏览 器 中 预览 网 页 效果 如 图 4-7 所 示 。 
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图 4-7 实例 演示 效果 
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4.5 本 章 小 结 


本 章 主要 介绍 了 链接 方面 的 知识 。 链 接 使 得 网 站 的 访问 者 能 够 在 网 页 之 间 进 行 切 
换 , 甚 至 在 网 页 的 不 同 部 分 之 间 进 行 切换 (实现 不 用 滚动 就 可 以 找到 所 需要 的 位 置 )。 其 
中 包括 : 

(1) 认识 超 链接 、 关 于 超 链接 的 路 径 以 及 创建 超 链 接 的 方法 与 技巧 。 

(2) 讲解 了 创建 各 种 不 同类 型 超 链接 : 文字 超 链接 、 图 像 超 链 接 、 书 签 链接 、 电 子 邮 
件 链接 、FTP 链接 、 下 载 文件 链接 等 。 

(3) 列举 了 超 链接 中 关键 操作 的 生动 实例 。 

相信 通过 本 章 的 学 习 , 读 者 可 以 很 好 地 掌握 网 页 中 超级 链接 的 相关 知识 ,为 深入 学 习 
HTML 打下 坚实 的 基础 。 


列 表 


列表 可 以 有 序 地 编排 一 些 信 息 资 源 ,使 其 结构 化 和 条 理化 ,并 以 列表 的 样式 显示 
出 来 ,以 便 浏览 者 能 更 加 快捷 地 获得 相应 的 信息 。 学 习 本 章 的 目的 是 掌握 列表 的 使 
用 。 列 表 可 以 使 网 页 变 得 更 加 清晰 、 有 条 理 ,为 实现 完美 的 页 面 效果 打下 良好 的 
基础 。 

本 章 重点 

。 掌握 无 序列 表 的 使 用 

。 掌握 有 序列 表 的 使 用 

。 掌握 谋 套 列表 的 使 用 

。 掌握 定义 列表 的 使 用 


5.1 列表 简介 


列表 是 网 页 中 的 一 个 常用 的 标志 元 素 ,列表 可 以 使 网 页 变 得 更 加 清晰 明了 ,使 网 
页 更 加 结构 化 。HTML5 中 列表 的 分 类 主要 有 无 序列 表 、 有 序列 表 、 骨 套 列表 、 定 义 
列表 。 


5.2 无 序列 表 


无 序列 表 是 项 目 列表 ,列表 内 容 可 以 按 任意 顺序 排列 。 列 表 项 前 不 是 用 连续 编号 而 
是 用 一 个 特定 符号 来 标记 ,默认 是 在 每 一 列表 项 前 加 上 一 个 圆 点 。 无 序列 表 开 始 于 二 ul 二 
标签 ,并 且 结 束 于 二 /ul 之 。 它 的 列表 项 封闭 在 <1i 盖 过 /1i 盖 标签 对 中 ,显示 时 列表 项 前 都 
有 项 目 符号 ,但 是 可 以 使 用 样式 修改 。 
< 去 ul 标签 定义 无 序列 表 . 一 li 标签 定义 列表 项 目 。 语 法 形式 如 下 : 
<ul> 
<1i> 项 目 名 称 < /1i> 
<1i> 项 目 名 称 < /1i> 


<1i> 项 目 名 称 < /1i> 
</ul> 


应 用 实例 如 例 5-1 所 示 。 


<!-- 例 5-1--> 
< !DOCTYPE html> 
<html lang= "en"> 
<head> 
<meta charset="UTF- 8"> 


<title> 无 序列 表 < /title> 
</head> 


<body> 
<ul> 
<1i> 联 系 人 :xxx< /1i> 
<1i> 联 系 地 址 :北京 市 丰台 区 < /1i> 
<1i> 邮 政 编码 :100036< /1i> 
</ul> 
< /body> 
</html> 


在 浏览 器 中 预览 网 页 效果 如 图 5-1 所 示 。 


/ 口 无 序列 表 
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。 联系 人 ，xxx 
。 联系 地 址 ， 北 京 市 丰台 区 
。 邮政 编码 ，100036 











图 5-1 无 序列 表演 示 效 果 


5.3 有 序列 表 
531 有 序列 表 及 编号 样式 


有 序列 表 是 编号 列表 ,用 于 对 网 页 中 的 某 些 内 容 进 行 编号 排列 ,以 便 使 读者 清晰 
地 了 解 每 行 的 顺序 。 在 HTML 中 插入 有 序列 表 是 通过 过 ol 和 <<1i 盖 标签 来 实现 


"sp 
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的 。 首 标签 二 ol> 和 尾 标签 二 /ol 二 之 间 的 内 容 是 有 序列 表 的 内 容 , 列 表 的 每 一 项 必 
包括 在 过 1 全 与 二 /1i 盖 之 间 。 有 序列 表 的 编号 样式 多 用 数字 表示 ,还 有 字母 .罗马 数 
字 等 样式 。 


532 编号 起 始 值 


如 果 和 希望 指定 编号 列表 的 起 始 数 值 ,就 可 以 在 二 ol 二 元 素 中 使 用 start 属性 。start 属 
性 的 值 必须 是 列表 中 该 项 的 数值 表示 。 
定义 有 序列 表 编 号 起 始 值 的 语法 格式 如 下 : 


<ol start= "起 始 值 "> 
<1i> 第 一 天 < /1i> 
<1i> 第 二 天 </1i> 
<1i> 第 三 天 </1i> 
<1i> 第 四 天 </1i> 
</ol> 


应 用 实例 如 例 5-2 所 示 。 


<!-- 例 5-2--> 
< !DOCTYPE html> 
<html lang= "en"> 
<head> 
<meta charset= "UTF- 8"> 
<title> 编 号 起 始 值 < /title> 
< /head> 
<body> 
<h2> 数 字 显示 ,自己 确定 开始 数字 < /h2> 
<ol start= "5"> 
<1i> 第 一 天 </1i> 
<1i> 第 二 天 < /1i> 
<1i> 第 三 天 < /1i> 
<1i> 第 四 天 < /1i> 
</ol> 
< /body> 
</html> 


在 浏览 器 中 预览 网 页 效果 如 图 5-2 所 示 。 
533 列表 项 编号 


在 二 ol 二 > 元素 中 使 用 type 属性 可 以 将 列表 项 的 排序 方式 由 默认 使 用 的 阿拉 伯 
数字 改 为 在 表 5-1 中 列 出 的 选项 ,具体 的 方法 是 将 type 属性 的 值 设置 为 相应 的 
字符 。 
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数字 显示 , 自己 确定 开始 数字 
5. 第 一 天 
6. 第 二 天 
7. 第 三 天 
8. 第 四 天 
图 5-2 编号 起 始 值 演示 效果 
表 5-1 二 ol 元 素 type 属性 
type 属性 的 值 描 述 示 例 
L 阿拉 伯 数 字 ( 默 认 值 ? 取 冯 3 
A 大 写字 母 A\B.C.D.E 
a 小 写字 母 abc.de 
I 大 写 罗马 数字 II.EL NM、V 
i 小 写 罗马 数字 ii 让、iv、V 








应 用 实例 如 例 5-3 所 示 。 


<!-- 例 5-3--> 
< IDOCTYPE html> 
<html lang= "en"> 
<head> 
<meta charset="UTF- 8"> 
<title> 列 表 项 编号 < /title> 
</head> 
<body> 
<h2> 数 字 显 示 < /h2> 
<ol> 
<1i> 第 一 天 < /1i> 
Ee 
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<1i> 第 三 天 < /1i> 
<1i> 第 四 天 < /1i> 
</ol> 
<h2> 大 写字 母 显示 < /h2> 
<ol type="A"> 
<1i> 第 一 天 < /1i> 
<1i> 第 二 天 < /1i> 
<1i> 第 三 天 < /1i> 
<1i> 第 四 天 < /1i> 
</ol> 
<h2> 小 写字 母 显示 < /h2> 
<oltype= "a"> 
<1i> 第 一 天 < /1i> 
<1i> 第 二 天 < /1i> 
<1i> 第 三 天 < /1i> 
<1i> 第 四 天 < /1i> 
</ol> 
<h2> 小 写 罗马 数字 显示 < /h2> 
<ol type="i"> 
<1i> 第 一 天 < /1i> 
<1i> 第 二 天 < /1i> 
<1i> 第 三 天 < /li> 
<1i> 第 四 天 < /1i> 
</ol> 
<h2> 大 写 罗马 数字 显示 < /h2> 
<ol type= "I"> 
<1i> 第 一 天 </1i> 
<1i> 第 二 天 < /1i> 
<1i> 第 三 天 < /1i> 
<1i> 第 四 天 < /1i> 
</ol> 
</body> 
</html> 


在 浏览 器 中 预览 网 页 效果 如 图 5-3 所 示 。 
3 注意 : type 属性 被 标记 为 弃 用 的 类 型 ,因为 已 经 有 了 替代 物 一 CSS 中 的 list- 


style-type 属性 。 可 以 在 一 li 一 元 素 中 使 用 type 属性 ,这 样 将 重 写 一 ol 一 元 素 中 该 属性 的 
值 ,但 是 这 种 用 法 已 经 被 弃 用 ,应 当 避 免 这 样 使 用 。 





/| D 列 二 项 六 S x VE 


€ 2 G [D file///D/code/6.html = 

















3. 第 三 天 
4 第 四 天 


大 写字 母 显 示 
5 第 三 天 
D. 第 四 天 

小 写字 母 显示 








图 5-3 列表 项 演示 效果 


5.4 同 套 列表 


在 列表 中 可 以 嵌 套 其 他 列表 。 例 如 ,可 能 希望 一 个 编号 列表 包含 多 个 单独 的 列表 ,每 
个 列表 对 应 于 编号 列表 中 的 一 项 。 每 个 嵌 套 的 列表 单独 编号 ,除非 使 用 start 属性 专门 指 
定 。 每 一 个 新 的 嵌 套 列表 必须 放置 在 二 li 二 元 素 中 。 

应 用 实例 如 例 5-4 所 示 。 


<!-- 例 5-4--> 
< !DOCTYPE html> 
<html> 
<head> 
<title> 嵌 套 列 表 < /title> 
<meta charset= "utf- 8"> 
</head> 
<body> 
<ol type="I"> 
<1i> 第 一 天 < /1i> 
<1i> 第 二 天 < /1i> 
<1li> 第 三 天 
<ol> 
<1i>1.1</1i> 
<1i>2.1</li> 


<1i>3.1</1i> 
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</ol> 


</li> 
</ol> 
</body> 
</html> 


在 浏览 器 中 预览 网 页 效果 如 图 5-4 所 示 。 
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图 5-4 本 套 列表 演示 效果 


5.5 定义 列表 


定义 列表 是 一 种 特殊 类 型 的 列表 ,定义 列表 包含 在 二 dl 二 元 素 中 。 二 dl 二 元 素 中 包 


含 交替 出 现 的 二 dt 二 元 素 和 二 dd 记 元 素 。 二 dt 二 元 素 的 内 容 是 元 素 的 标题 。 在 二 dd 元 
素 中 包含 前 面 二 dt 二 元 素 元 素 的 内 容 。 


基本 语法 如 下 : 

<dl> 
<dt> 名 称 <dd> 说 明 
<qdt> 名 称 <dd> 说 明 
<qdt> 名 称 <dd> 说 明 


<dl> 


应 用 实例 如 例 5-5 所 示 。 


<!-- 例 5-5--> 


< !DOCTYPE html> 


<html lang= "en"> 
<head> 
<meta charset= "UTF- 8"> 
<title> 定 义 列 表 < /title> 
</head> 
<body> 
<dl> 
<dt> 联 系 人 <dd> xxx 
<dt> 联 系 地 址 <dd> 北 京 市 丰台 区 
<dt> 邮 政 编码 <dd>100036 
<dl> 
< /body> 
</html> 


在 浏览 器 中 预览 网 页 效果 如 图 5-5 所 示 。 
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图 5-5 定义 列表 演示 效果 


5.6 上 机 练习 


本 节制 作 一 个 简单 的 通知 。 具 体 步 骤 如 下 。 
步骤 1: 打开 笔记 本 ,输入 以 下 代码 : 


<!-- 例 5-6--> 

< IDOCTYPE html> 

<html lang="en"> 
<head> 





<meta http- equiv= "Content— Type" content— "text/html; charset=UTF- 8"> 
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<title> 普 通话 考试 通知 < /title> 
</head> 
<body> 
<h2>< center><b> 普 通话 考试 通知 < /b>< /center>< /h2> 
我 院 今年 3 月 份 的 普通 话 水 平 测试 开始 接受 报名 ,具体 事项 通知 如 下 :<br> 
<ol type="1"> 
<1li><strong> 报 名 </strong></1i> 
<ol type="A"> 
<1i> 报 名 时 间 :3 月 16 一 21 日 ,逾期 不 予 受理 。< /1i> 
<1i> 报 名 地 点 :所 在 院 系 办 公 室 。< /1i> 
<1i> 报 名 费用 : 按 物价 局 规定 85 元 /人 /次 ( 含 培训 费用 ) ,报名 时 交 齐 。< /1i> 
<1i> 提 交 资 料及 注意 事项 :< /1i> 
<ol type= "a"> 
<1i> 参 加 测试 的 学 生 须 填写 (河南 省 普通 话 水 平 测试 报名 表 ) 一 份 ( 准 考证 号 码 
不 用 填写 );< /1i> 
<1i> 填 写 准 考证 一 份 (编号 不 用 填写 ), 所 填 姓 名 和 出 生年 月 等 须 与 身份 证 一 
致 :</1i> 
<1i> 提 交 一 寸 彩色 证 件 照 3 张 (照片 不 能 是 打印 版 ,不 能 是 生活 照 , 3 张 照 片 必 
须 统一 底片 ) ,其 中 两 张 照片 贴 在 报名 表 和 准 考证 上 , 另 一 张 用 钢笔 在 背面 写 上 
校 名 、 系 别 和 姓名 ,与 表格 一 起 上 交 。< /1i> 
</ol> 
</ol> 
<1i><strong> 培 训 < /strong>< /1i> 
<dl> 
<dt> 培 训 时 间 :<dd>3 月 31 日 (星期 六 )。 
<dt> 培 训 地 点 :<dd> 河 南 财 经 学 院 4 号 楼 503 教 室 (如 有 变动 ,以 通知 为 准 )。 
<dt> 注 意 事项 :<dd> 报 考 同学 请 自 带 ( 普 通话 水 平 测试 指导 用 书 (新 版 ) ,可 到 学 而 
优等 书店 购买 。 
</dl> 
<1i><strong> 测 试 </strong>< /1i> 
<ul> 
<1i> 测 试 时 间 :4 月 7 日 .8 日 (星期 六 、 星 期 日 );< /1i> 
<1i> 测 试 地 点 :河南 财经 学 院 3 号 楼 401 教室 。< /1i> 
</ul> 
<p> ( 注 :具体 时 间 和 地 点 按 河 南 财 经 学 院 测试 站 发 回 的 准 考证 上 所 列 .)< /p> 
</ol> 
</body> 
</html> 


步骤 2: 将 文件 保存 为 five_html. html。 
步骤 3: 在 浏览 器 中 预览 网 页 效果 如 图 5-6 所 示 。 
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报名 
人 报名 时 间 ，3 月 16 一 21 bb 遍 期 不 子 受理 。 
报名 地 点 ， 所 在 院 系 : 


和 信人 二 庆 元 人/ ( 含 培训 费用 ) ， 报 名 时 交 齐 。 
四 < 河南 省 普通 话 水 平 测试 报名 表 》 一 份 ( 准 考证 号 码 不 用 填 


本 填写 准 考证 一 份 编号 不 用 填写 ) ， 所 填 姓 名 和 出 生年 月 等 须 与 身份 证 一 致 ， 
， 提 交 小 一 十 彩色 证 件 照 3 张 (照片 不 能 是 打印 版 、 不 能 是 生活 昭 ，_3 张 照片 必须 统一 底 
2: 5 六 后 由 在 报名 表 和 准 考 证 上 ， ， 另 一 张 用 钢笔 在 背面 写 上 校 名 、 系 别 和 姓 


培训 时 间 ， 
3 月 31 日 (星期六) 。 
培训 地 点 ， 
河南 财经 学 院 4 号 楼 503 教 室 ( 如 有 变动 ， 以 通知 为 准 ) 。 


“报考 同学 请 自 带 《普通 话 水 平 测试 指导 》 用书 (新 版 ) ， 可 到 学 而 优等 书店 购买 。 


测试 
。 测试 时 间 ，4 月 7? 日 、8 日 星期六、 星期 日 ) ， 
。 测试 地 点 ， 河 南 财 经 学 院 3 号 棱 401 救 室 。 


( 注 ， 具 体 时 间 和 地 点 按 河南 财经 学 院 测试 站 发 回 的 准 考证 上 所 列 。) | 








图 5-6 实例 演示 效果 


5.7 本 章 小 结 


本 章 主要 介绍 了 HTML5 列表 方面 的 知识 。 列 表 使 得 网 页 模块 化 变 得 更 加 直观 , 列 
表 主 要 有 无 序列 表 、 有 序列 表 、 典 套 列 表 、 定 义 列表 。 

(1) 无 序列 表 适 合成 员 之 间 无 级 别 顺序 关系 的 情形 ; 

(2) 有 序列 表 适 合 各 项 目 之 间 存 在 顺序 关系 的 情形 ; 

(3) 嵌 套 列表 适用 于 一 个 列表 包含 多 个 单独 列表 的 情形 ; 

(4) 定义 列表 适用 于 一 个 术语 名 对 应 多 重 定义 的 情形 。 


多 媒体 应 用 


学 习 本 章 的 目的 是 掌握 HTML5 中 图 片 .音频 和 视频 的 应 用 ,为 编写 Web 程序 打下 基础 。 


本 章 重点 


。 掌握 如 何 美化 和 设置 图 片 


。 掌握 音频 和 视频 的 基本 概念 和 应 用 


片 


图 片 是 网 页 中 不 可 缺少 的 元 素 ,巧妙 地 在 网 页 中 使 用 图 片 ,可 以 为 网 页 增色 不 少 。 网 页 支 
持 多 种 图 片 格式 ,并 且 可 以 对 插入 的 图 片 设置 宽度 和 高 度 。 网 页 中 使 用 的 图 像 可 以 是 GIF、 
GPEG、BMP、TIFF、PNG 等 格式 的 图 像 文 件 ,其 中 最 广泛 的 主要 是 GIF 和 JPEG 两 种 格式 。 


611 图 片 标记 
图 像 可 以 美化 网 页 ,插入 图 像 使 用 单 标记 二 img> 。img 标记 的 属性 及 描述 如 表 6-1 















































所 示 。 
表 6-1 一 img 二 标记 的 属性 及 描述 
属 性 值 描 述 
alt text 定义 有 关 图 像 的 短 描述 
src URL 要 显示 的 图 像 的 URL 
height Pixels% 定义 图 像 的 高 度 
ismap URL 把 图 像 定 义 为 服务 器 端的 图 像 映射 
usemap URL 定义 作为 客户 端 图 像 映射 的 一 副 图 像 
vspace Pixels 定义 图 像 顶 部 和 底部 的 空 表 
width Pixels% 设置 图 像 的 宽度 
src 属性 用 于 指定 图 片 源 文件 的 路 径 , 它 是 img 标记 必 不 可 少 的 属性 。 语 法 格式 
如 下 : 
<img src=" 图 片 路 径 "> 
代码 如 下 : 


< ! DOCTYPE html> 
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<html> 
<head> 
<meta charset= "utf- 8"> 
<title> 插 入 图 片 < /title> 
</head> 
<body> 
< img src="../picture/imagel.jpg"> 
< /body> 
</html> 


在 浏览 器 中 运行 结果 如 图 6-1 所 示 。 











图 6-1 图 片 标记 演示 效果 


612 指定 图 像 的 高 与 宽 


在 HTML 文档 中 ,还 可 以 设置 插入 图 片 的 显示 大 小 ,一 般 是 按 原始 尺寸 显示 ,但 也 
可 以 任意 设置 显示 尺寸 。 设 置 图 像 尺寸 分 别 用 属性 width( 宽 度 ) 和 height( 高 度 ) 。 
例 6-1 的 代码 如 下 。 


<!-- 例 6-1--> 
< ! DOCTYPE html> 
<html> 
<head> 
<meta charset= "utf- 8"> 
<title> 插 入 图 片 < /title> 
</head> 
<body> 
<img src="../picture/imagel.jpg"> 
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<img src="../picture/imagel.jpg" width=20%> 
< img src="../picture/imagel.jpg" width=200 height=100> 
< /body> 
</html> 


在 浏览 器 中 运行 结果 如 图 6-2 所 示 。 








图 6-2 图 片 标记 演示 效果 


当 只 为 图 片 设置 一 个 尺寸 属性 时 ,另外 一 个 尺寸 就 以 图 片 原 始 的 长 宽 比 例 来 显示 。 
图 片 的 尺寸 单位 可 以 选择 百分比 或 数值 。 百 分 比 为 相对 尺寸 ,数值 是 绝对 尺寸 。 
613 指定 图 像 的 对 齐 方式 


图 像 和 文字 之 间 的 排列 通过 align 参数 来 调整 。 图 像 的 绝对 对 齐 方式 与 相对 文字 的 
对 齐 方式 不 同 ,绝对 对 齐 方式 包括 左 对 齐 、 右 对 齐 和 居中 对 齐 3 种 ,而 相对 文字 对 齐 方式 
则 是 指 图 像 与 一 行文 字 的 相对 位 置 。 语 法 格式 如 下 : 


<img src= "图像 文件 地 址 " align= "相对 文字 的 对 齐 "> 
在 该 语法 中 ,align 的 取 值 如 表 6-2 所 示 。 
表 6-2 图 像 相 对 文字 的 对 齐 方 式 




















align 取 值 对 齐 方式 

top 把 图 像 的 项 部 和 同行 的 最 高 部 分 对 齐 ( 可 能 是 文本 的 顶部 ,也 可 能 是 图 像 的 顶部 ) 
middle 把 图 像 的 中 部 和 同行 的 中 部 对 齐 ( 通 常 是 文本 行 的 基线 ,并 不 是 实际 的 行 的 中 部 ) 
bottom 把 图 像 的 底部 和 同行 文本 的 底部 对 齐 

texttop 把 图 像 的 顶部 和 同行 中 最 高 的 文本 的 顶部 对 齐 

absmiddle 把 图 像 的 中 部 和 同行 中 最 大 项 的 中 部 对 齐 
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续 表 





align 取 值 对 齐 方式 





baseline 把 图 像 的 底部 和 文本 的 基线 对 齐 





absbottom 把 图 像 的 底部 和 同行 中 最 低 项 的 底部 对 齐 








left 使 图 像 和 左边 界 对 齐 ( 文 本 环绕 图 像 ) 默认 值 
right 使 图 像 和 右边 界 对 齐 ( 文 本 环绕 图 像 ) 








align 取 值 对 齐 方式 





例 6-2 的 代码 如 下 。 


<1-== 例 6-2=-=> 
< ! DOCTYPE html> 
<html> 
<head> 
<meta charset= "utf- 8"> 
<title> 插 入 图 片 < /title> 
< /head> 
<body> 
<font size="+3" color=#ff66cc"> 对 齐 方式 < /font> 
< img src="../picture/imagel .jpg" align= "bottom" width= 20% > 
< img src="../picture/imagel .jpg" align= "middle" width= 20%> 
< img src="../picture/imagel.jpg" align= "texttop" width=20%> 
< img src="../picture/imagel.jpg" align= "abseline" width= 20%> 
</body> 
</html> 


在 浏览 器 中 运行 结果 如 图 6-3 所 示 。 
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图 6-3 图 像 的 对 齐 方式 演示 效果 
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6.2 音频 和 视频 


目前 ,在 网 页 上 没有 关于 音频 和 视频 的 标准 ,多 数 音 频 


和 视频 都 是 通过 插件 来 播放 


的 。 为 此 ,HTML5 新 增 了 音频 和 视频 的 标签 。 本 节 将 讲述 音频 和 视频 的 基本 概念 、 常 用 


属性 和 浏览 器 的 支持 情况 。 
621 视频 文件 格式 


video 标签 主要 是 定义 播放 视频 文件 或 者 视频 流 的 标准 
为 Ogg、WebM 和 MPEG4。 


。 它 支持 3 种 视频 格式 ,分 别 


如 果 需 要 在 HTML5 网 页 中 播放 视频 ,输入 的 基本 格式 如 下 : 


<video src= "123.mp4" controls= "controls"> ...</video> 


其 中 ,在 过 video 之 和 所 /video> 之 间 搬 入 的 内 容 是 供 不 支 持 video 元 素 的 浏览 器 显 


示 的 。 
例 6-3 的 代码 如 下 。 


<4= 一 全 63-> 
< ! DOCTYPE html> 
<html> 
<head> 
<meta charset= "utf- 8"> 
<title>video< /title> 
</head> 
<body> 
<video src= "movie.avi" controls="controls"> 
您 的 浏览 器 不 支持 video 标 签 ! 
</video> 
</body> 
</html> 


在 浏览 器 中 运行 结果 如 图 6-4 所 示 。 
如 果 浏 览 器 版 本 支持 ,看 到 的 是 加 载 的 视频 控制 条 界面 
器 不 支持 video 标签 !” 


622 video 标签 的 属性 
video 标签 的 常见 属性 和 含义 如 表 6-3 所 示 。 


。 否 则 看 到 的 就 是 “您 的 浏览 


D vow 
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图 6-4 视频 文件 格式 演示 效果 


表 6-3 video 标签 的 常见 属性 和 含义 


























属 性 值 描 述 
autoplay autoplay 视频 就 绪 后 马上 播放 
controls controls 向 用 户 显示 控件 ,比如 播放 按钮 
loop loop 每 当 视 频 结 束 时 重新 开始 播放 
视频 在 页 面 加 载 时 进行 加 载 ,并 预备 播放 。 如 果 使 用 autoplay, 则 忽 
preload preload 略 该 属性 
Src url 要 播放 的 视频 的 URL 
width 宽度 值 设置 视频 播放 器 的 宽度 
height 高 度 值 设置 视频 播放 器 的 高 度 
当 视 频 未 响应 或 缓冲 不 足 时 ,该 属性 值 链 接 到 一 个 图 像 。 该 图 像 将 
Paster ee 以 一 定 比例 被 显示 出 来 











623 为 视频 添加 控件 和 自动 播放 


1. controls 属性 

controls 属性 规定 浏览 器 应 该 为 视频 提供 播放 控件 。 其 中 浏览 器 控件 应 该 包括 播 
放 、 和 暂停 定位、 音量 ,全屏 切换 等 。 

例 6-4 的 代码 如 下 。 


<!-- 例 6-4--> 
< ! DOCTYPE html> 
<html> 

<head> 
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<meta charset= "utf- 8"> 
<title> video< /title> 

</head> 

<body> 
<video controls="controls" > 

< source src= "movie.mp4"> 

</video> 

< /body> 

</html> 


在 浏览 器 中 运行 结果 如 图 6-4 所 示 。 

在 浏览 器 中 显示 ,可 以 看 到 网 页 中 加 载 了 视频 播放 控件 ,这 里 只 有 单 击 其 中 的 “播放 ” 
按钮 , 才 可 以 播放 加 载 的 视频 文件 。 

2. autoplay 属性 

autoplay 属性 规定 一 旦 视频 就 绪 马 上 开始 播放 。 如 果 设 置 了 该 属性 ,视频 将 自动 


播放 。 
例 6-5 的 代码 如 下 。 


<!-- 例 6-5--> 
< ! DOCTYPE html> 
<html> 
<head> 
<title>video< /title> 
</head> 
<body> 
<video controls="controls" autoplay= "autoplay"> 
< Source src= "movie .mp4"> 
</video> 
< /body> 
</html> 


在 浏览 器 中 运行 结果 如 图 6-5 所 示 。 
在 浏览 器 中 显示 ,可 以 看 到 网 页 中 加 载 了 视频 播放 控件 ,并 开始 自动 播放 加 载 的 视频 
交 件 。 


624 为 视频 指定 循环 播放 和 海报 图 像 


1. loop 属性 
loop 属性 规定 当 视 频 结束 后 将 重新 开始 播放 。 如 果 设 置 该 属性 , 则 视频 将 循环 
播放 。 


例 6-6 的 代码 如 下 。 


<!-- 例 6-6--> 
< ! DOCTYPE html> 
<html> 
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图 6-5 视频 控件 属性 演示 效果 

<head> 

<meta charset= "utf- 8"> 

<title>video< /title> 
</head> 
<body> 


<Video controls="controls" loop= "1oop" > 
< source src= "movie .mp4"> 
</video> 
</body> 
</html> 
在 浏览 器 中 显示 ,可 以 看 到 网 页 中 加 载 了 视频 播放 控件 ,并 循环 播放 加 载 的 视频 文件 。 
2. poster 属性 
通过 poster 属性 可 以 设置 蔡 换 视频 的 图 片 (封面 图 片 ) ,浏览 器 在 下 面 三 种 情况 下 会 
使 用 这 个 图 片 : 
(1) 视频 第 一 帧 未 加 载 完毕 。 
(2) 把 preload 属性 设置 为 none。 
(3) 没有 找到 指定 的 视频 文件 。 
例 6-7 的 代码 如 下 。 


<!-- 例 6-7--> 
< ! DOCTYPE html> 
<html> 
<head> 
<meta charset="utf- 8"> 
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<title> video< /title> 

</head> 

<body> 
<video controls="controls" poster="image.jpg"> 

< source src= "movie.mp4"> 

</video> 

< /body> 

</html> 


在 浏览 器 中 运行 结果 如 图 6-6 所 示 。 


[EE 
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图 6-6 ”视频 poster 属性 演示 效果 


625 阻止 视频 预 加 载 
Firefox 允许 禁止 预 加 载 模式 ,代码 如 下 : 
user pref ("network.prefetch- next",? false) 


预 加 载 (Link prefetch) 不 能 跨 域 工作 ,包括 跨 域 拉 取 Cookies。 

预 加 载 会 污染 你 的 网 站 访问 量 统计 ,因为 有 些 预 加 载 到 浏览 器 的 页 面 用 户 可 能 并 未 
真正 访问 。 

火狐 浏览 器 从 2003 年 开始 就 已 经 提供 了 对 这 项 预 加 载 技术 的 支持 。 


注意 : user_pref("network. prefetch-next" ,false) 属 于 JavaScript 相关 知识 。 





626 音频 文件 格式 
audio 标签 主要 是 定义 播放 声音 文件 或 者 音频 流 的 标准 。 它 支持 3 种 音频 格式 ,分 别 
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为 Ogg、MP3 和 WAV。 
如 果 需 要 在 HTML5 网 页 中 播放 音频 ,输入 的 基本 格式 如 下 : 


<audio src="song.mp3" controls="controls" ></audio > 


侠 提 示 : src 属性 规定 要 播放 的 音频 的 地 址 ,controls 属性 是 供 添加 播放 、 暂 停 和 音 
量 控件 的 属性 。 

另外 ,在 一 audio> 和 到 /audio> 之 间 插 入 的 内 容 是 供 不 支 持 audio 元 素 的 浏览 器 显示 的 。 

例 6-8 的 代码 如 下 。 


<!1-- 例 6-8--> 
< ! DOCTYPE html> 
<html> 
<head> 
<meta charset= "utf- 8"> 
<title>audio< /title> 
< /head> 
<body> 
<audio src= "song.mp3" controls= "controls"> 
您 的 浏览 器 不 支持 audio 标 签 ! 
</audio> 
< /body> 
</html> 


在 浏览 器 中 运行 结果 如 图 6-7 所 示 。 
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图 6-7 音频 文件 演示 效果 


如 果 浏 览 器 版 本 支持 ,看 到 的 是 加 载 的 视频 控制 条 界面 ,否则 看 到 的 就 是 “您 的 浏览 
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器 不 支持 audio 标签 1” 
627 audio 标签 的 属性 


audio 标签 的 常见 属性 和 含义 如 表 6-4 所 示 。 
表 6-4 audio 标签 的 常用 属性 


























属 性 值 描 述 

autoplay autoplay( 自 动 播放 ) 音频 就 绪 后 马上 播放 

controls controls( 控 制 ) 向 用 户 显示 控件 ,比如 播放 按钮 

loop loop( 循 环 ) 每 当 音 频 结束 时 重新 开始 播放 

preload preload( 加 载 ) nee dtodd 
SIC url( 地 址 ) 要 播放 的 音频 的 URL 


另外 ,audio 标签 可 以 通过 source 属性 添加 多 个 音频 文件 ,具体 格式 如 下 : 


<audio controls= "controls"> 
< source src= "123.ogg" type= "audio/ogg"> 
< source src= "123.mp3" type= "audio/mp3"> 
</audio> 


628 自动 播放 、 循 环 和 载 入 音频 


1. controls 属性 

controls 属性 规定 浏览 器 应 该 为 视频 提供 播放 控件 。 如 果 设 置 了 该 属性 , 则 规定 不 
存在 设置 的 脚本 控件 。 其 中 浏览 器 控件 应 该 包括 播放 、 和 暂停 .定位 .音量 .全 屏 切 换 等 。 

例 6-9 的 代码 如 下 。 


<!-- 例 6-9--> 
< ! DOCTYPE html> 
<html> 
<head> 
<meta charset= "utf- 8"> 
<title>audio< /title> 
</head> 
<body> 
<audio controls="controls"> 
< source src="song.mp3" type= "audio/mpeg"> 
</audio> 
< /body> 
</html> 


在 浏览 器 中 显示 ,可 以 看 到 网 页 中 加 载 了 音频 播放 控件 ,这 里 只 有 单 击 其 中 的 “播放 ” 
按钮 , 才 可 以 播放 加 载 的 音频 文件 。 
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2. autoplay 属性 


autoplay 属性 规定 一 旦 视频 就 绪 马 上 开始 播放 。 如 果 设 置 了 该 属性 ,视频 将 自动 


例 6-10 的 代码 如 下 。 


<!-- 例 6-10--> 
< ! DOCTYPE html> 
<html> 
<head> 
<title> audio< /title> 
</head> 
<body> 
<audio controls="controls" autoplay= "autoplay" > 
<source src= "song.mp3" type= "audio/mpeg"> 
</audio> 
< /body> 
</htm> 


在 浏览 器 中 运行 结果 如 图 6-8 所 示 。 
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图 6-8 ”音频 文件 自动 播放 演示 效果 


在 浏览 器 中 显示 ,可 以 看 到 网 页 中 加 载 了 音频 播放 控件 ,并 开始 自动 播放 加 载 的 音频 


3. loop 属性 
loop 属性 规定 当 视 频 结束 后 将 重新 开始 播放 。 如 果 设 置 该 属性 , 则 视频 将 循环 


例 6-11 的 代码 如 下 。 
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<!-- 例 6-11--> 
< ! DOCTYPE html> 
<html> 
<head> 
<meta charset= "utf- 8"> 
<title>audio< /title> 
</head> 
<body> 
<audio controls="controls" loop="loop"> 
< source src="song.mp3" type= "audio/mpeg"> 
< source src= "song.ogg" type= "audio/ogg"> 
</audio> 
< /body> 
</html> 


在 浏览 器 中 显示 ,可 以 看 到 网 页 中 加 载 了 音频 播放 控件 ,并 循环 播放 加 载 的 音频 
文件 。 

4. preload 属性 

preload 属性 规定 是 否 在 页 面 加 载 后 载 入 音频。 

例 6-12 的 代码 如 下 。 


<!-- 例 6-12--> 
< ! DOCTYPE html> 
<html> 
<head> 
<meta charset= "utf- 8"> 
<title> audio< /title> 
</head> 
<body> 
<audio controls="controls" prload="auto"> 
< source src= "song.mp3" type= "audio/mpeg"> 
< source src= "song.0gg" type= "audio/ogg"> 
</audio> 
< /body> 
</html> 


如 果 设 置 了 autoplay 属性 , 则 忽略 该 属性 。 
preload 可 能 的 值 : 

。 auto: 当 页 面 加 载 后 载 人 整个 音频 。 

。 meta: 当 页 面 加 载 后 只 载 人 元 数据 。 

。 none: 当 页 面 加 载 后 不 载 人 音频 。 


629 使 用 多 种 来 源 的 视频 和 备用 文本 
浏览 器 兼容 ,如 何 让 每 一 个 浏览 器 都 能 顺利 播放 视频 。 现 在 大 部 分 浏览 器 都 能 支持 
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H. 264 格式 的 视频 ,但 Opera 浏览 器 却 一 直 不 支持 。 我 们 需要 通过 后 备 措施 保证 每 个 人 
都 能 看 到 视频 ,通常 有 下 面 几 种 方案 : 

1. 使 用 多 种 视频 格式 

去 video> 元 素 有 个 内 置 的 格式 后 备 系统 。 我 们 不 使 用 sre 属性 ,而 是 在 其 内 部 由 套 
一 组 一 source> 元 素 , 浏 览 器 会 选择 播放 第 一 个 它 所 支持 的 文件 。 


<video controls> 
<source src="hangge.mp4" type="video/mp4"> 
<source src="hangge.webm" type="video/webm"> 
< /video> 


2. 添加 Flash 后 备 措施 (推荐 ) 

上 面 方法 并 不 推荐 给 读者 ,因为 Opera 浏览 器 只 占 不 到 1% 的 份额 ,并 不 必要 特意 为 
它 把 视频 都 转 码 。 这 里 ,使 用 Flash 作为 备用 播放 方案 是 比较 方便 的 方案 ,同时 Flash 还 
能 兼容 IE8 这 种 连 二 video 二 元素 都 不 支持 的 旧版 本 浏览 器 。 

如 下 代码 使 用 Flowplayer Flash 作为 备用 播放 器 : 


<video controls> 
< source src="hangge.mp4"type= "video/mp4"> 
< source src= "hangge.webm"type= "video/webm"> 
<object id= "flowplayer" width= "400" height= "300" 
data= "flowplayer- 3.2.18.swf" 
type= "application/x- shockwave- flash"> 
<param name= "movie"value= "flowplayer- 3.2.18.swf"> 
<param name= "flashvars"value= 'config= {"clip":"hangge.mp4"}'> 
</object> 


</video> 


也 有 人 优先 使 用 Flash, 而 HTML5 作为 后 备 措施 。 这 么 做 是 因为 Flash 普及 率 比较 
高 ,而 HTML5 作为 后 备 可 以 扩展 iPad 和 iPhone 用 户 ,代码 如 下 : 


<object id= "flowplayer" width= "400" height= "300" 
data= "flowplayer- 3.2.18.swf" 
type= "application/x- shockwave- flash"> 
<param name="movie" value= "flowplayer- 3.2.18.swf"> 
<param name="flashvars" value='config={"clip":"hangge.mp4"}'> 
<video controls> 
<source src="hangge.mp4" type= "video/mp4"> 
<source src="hangge.webm" type="video/webm"> 
</video> 


</object> 
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6.3 本 章 小 结 


本 章 主要 讲解 了 图 片 .音频 以 及 视频 的 基本 结构 和 基本 语法 。 重 点 内 容 如 下 : 

(1) 过 img src 二 "# # #" 之 加 载 图 片 。 用 width height 和 align 设置 图 片 的 宽 、 高 和 
对 齐 方式 。 

(2) 二 video src 一 " 井 井 井 "之 加 载 视 频 。 

(3) 二 audio src 一 " 井 井 #" 盖 加 载 音频 。 

autoplay 和 loop 用 来 设置 自动 播放 和 循环 播放 音频 或 视频 。 


在 网 页 中 表格 是 一 种 经 常 使 用 的 设计 结构 ,就 像 表 格 的 内 容 中 可 以 包含 任何 的 数据 ， 
如 文字 、 图 像 .表单 、. 超 链接 .表格 等 。 所 有 在 HTML 中 可 以 使 用 的 数据 ,都 可 以 被 设置 
在 表格 中 ,所 以 有 关 表 格 的 设置 的 标记 与 属性 非常 多 ,表格 在 网 页 设计 中 占有 了 很 大 的 
分 量 。 

本 章 重点 

。 熟练 掌握 表格 的 基本 格式 

。 掌握 一 table 二 标签 下 的 常用 属性 

。 掌握 一 table 二 样式 的 设计 

。 熟悉 表格 的 结构 化 、 直 列 化 以 及 表格 的 标题 

。 了解 表格 的 谋 套 


7.1 表格 标记 


使 用 表格 来 展示 数据 ,可 以 使 数据 更 清晰 ,在 网 页 布局 中 ,使 用 表格 进行 布局 ,使 得 结 
构 位 置 更 简单 。 

一 个 表格 包括 行 和 列 : 
二 table 二 用 来 标识 一 个 表格 对 象 的 开始 ,二 /table 二 是 标识 一 个 表格 对 象 的 结束 ， 
一 个 表格 中 只 人 允许 出 现 一 对 一 table> 。 
到 tr> 用 来 标识 一 行 的 开始 ,二 /tr 之 标记 用 于 标识 表格 一 行 的 结束 ,表格 内 有 多 
少 对 二 tr 二 三 /tr 二 根据 表格 的 行 数 来 确定 。 
二 td 二 用 来 标识 表格 某 行 中 的 一 个 单元 格 的 开始 ,二 /td 二 标记 用 于 标识 一 个 单 
元 格 的 结束 。 二 td 二 二 /td 二 标记 应 书写 在 过 tr 过 /tr 二 标记 内 。 
例 7-1 的 代码 如 下 。 





<-- 例 7-1--> 
< IDOCTYPE html> 
<html> 
<head> 
<title>thisisatable< /title> 
<meta charset= "utf- 8" /> 
</head> 
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<body> 
<table border="1"> 
<tr> 
<td>Al< /td> 
<td>Bl< /td> 
<td>cl</td> 
</tr> 
<tr> 
<td>R2< /td> 
<td>B2< /td> 
<td> C2< /td> 
</tr> 
</table> 
< /body> 
</html> 


在 浏览 器 中 运行 效果 如 图 7-1 所 示 。 
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图 7-1 表格 实例 演示 效果 


7.1.1 表格 标题 


有 时 候 我 们 的 表格 往往 是 有 一 定 意义 的 ,表格 的 标题 是 非常 有 必要 的 。 
为 表格 添加 标题 ,可 用 所 caption 过 标签 定义 表格 的 标题 。 二 caption 二 标签 必须 直接 
放置 到 一 table> 标 签 之 后 。 每 个 表格 只 能 指定 一 个 标题 。 


<caption> 表 格 标题 < /caption> 
例 7-2 的 代码 如 下 。 


<-- 例 7-2--> 
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< IDOCTYPE html> 
<html> 
<head> 
<meta charset= "utf- 8"> 
<title>< /title> 
</head> 
<body> 
<table border=1> 
<caption> 标 题 < /caption> 
i 
<td>Al< /td> 
<td>Bl< /td> 
<td> Cl< /td> 
</tr> 
<tr> 
<td>R2< /td> 
<td>B2< /td> 
<td>c2< /td> 
</tr> 
</table> 
< /body> 
</html> 


在 浏览 器 中 运行 效果 如 图 7-2 所 示 。 
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图 7-2 表格 标题 演示 效果 


提示 : 通常 标题 会 居中 显示 在 表格 上 方 , 当 设置 了 一 caption align 王 bottom 二 水 


平 表 头 二 /caption 二 ,表格 的 名 称 就 会 显示 在 下 方 。 
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712 表格 表 头 


具有 实际 意义 的 表格 , 表 头 也 是 非常 必要 的 ,常见 的 表 头 包括 垂直 和 水 平 两 种 。 
例 7-3 的 代码 如 下 。 


<-- 例 7-3--> 
< !DOCTYPE html> 
<html> 
<head> 
<meta charset= "utf- 8"> 
<title></title> 
< /head> 
<body> 
<table border= "1"> 
<caption align=bottom> 水 平 表 头 < /caption> 
<tr> 
<th> 姓 名 < /th> 
<th> 性 别 < /th> 
<th> 电 话 < /th> 
</tr> 
<tr> 
<td> 张 三 </td> 
<td> 男 < /td> 
<td> 123456< /td> 
< /tr> 
</table> 
<table border="1"> 
<caption align=bottom> 垂 直 表 头 < /caption> 
<tr> 
<th> 姓 名 < /th> 
<th> 张 三 < /th> 
</tr> 
<tr> 
<th> 性 别 < /th> 
<td>123456< /td> 
</tr> 
区 E> 
<th> 电 话 < /th> 
<td> 123456< /td> 
</tr> 
</table> 
</body> 
</html> 


在 浏览 器 中 运行 效果 如 图 7-3 所 示 。 
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图 7-3 表格 表 头 演示 效果 


7.2 表格 属性 
721 设置 表格 的 边框 属性 
默认 情况 下 ,表格 的 边框 为 0, 也 可 以 为 表格 设置 边框 线 。 


border= "value" 


利用 border 自 带 的 属性 ,可 以 定义 表格 的 边框 类 型 ,如 常见 的 加 粗 边 框 的 表格 。 


border 属性 所 对 应 的 属性 值 越 大 ,所 显示 边框 越 粗 , 即 边框 的 粗细 是 由 border 的 值 来 决 
定 的 ,如 图 7-4 所 示 。 
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图 7-4 不 同 border 值 演示 效果 
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还 可 以 为 表格 设置 边框 线 的 颜色 ,通过 bordercolor 二 颜色 值 (red, blue, green*…… ) 
来 设置 。 颜 色 值 也 可 以 是 具体 的 十 六 进 制 的 颜色 值 ,例如 bordercolor 二 #336699。 


722 设置 表格 的 宽度 和 高 度 


默认 情况 下 ,表格 的 宽度 和 高 度 根据 内 容 自动 调整 ,也 可 以 手动 设置 表格 的 宽度 和 高 
度 。 通 过 width 属性 定义 表格 的 宽度 ,height 属性 定义 表格 的 高 度 , 单 位 是 像素 或 百 分 
比 。 如 果 是 百分比 , 则 可 分 为 两 种 情况 : 如 果 不 是 嵌 套 表格 ,那么 百分比 是 相对 于 浏览 器 
窗口 而 言 的 ;如 果 是 嵌 套 表格 , 则 百分比 相对 的 是 内 套 表格 所 在 的 单元 格 宽度 和 高 度 。 

例 7-4 的 代码 如 下 。 


<-- 例 7-4--> 
< !DOCTYPE html> 
<html> 
<head> 
<meta charset= "utf- 8"> 
<title>< /title> 
</head> 
<body> 
<table border= 1 width= "300px" height= "200px"> 
<tr> 
<td>Al< /td> 
<td>Bl< /td> 
<td> Cl< /td> 
</tr> 
<tr> 
<td>R2< /td> 
<td>B2< /td> 
<td> C2< /td> 
</tr> 
</table> 
< /body> 
</html> 


在 浏览 器 中 运行 效果 如 图 7-5 所 示 。 
723 设置 表格 的 背景 颜色 


通过 bgcolor 属性 来 设置 表格 的 背景 颜色 ,颜色 的 定义 与 bordercolor 类 似 , 即 可 以 使 
用 英文 颜色 名 称 或 十 六 进 制 颜色 值 。 


bgcolor= red 
724 设置 表格 的 背景 图 像 
除了 可 以 为 表格 定义 背景 颜色 之 外 ,还 可 以 为 表格 定义 背景 图 片 。 
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图 7-5 表格 宽度 和 高 度 演 示 效 果 


background= "图 片 路 径 " 
例 7-5 的 代码 如 下 。 


<-- 例 7-5--> 
< !IDOCTYPE html> 
<html> 

<head> 


<meta charset= "utf- 8"> 


<title>< /title> 
</head> 
<body> 


<table background= "little Prce.jpg " border=1 height= "220px" width= 
"293px"> 


<tr> 
<td>Al< /td> 
<td>Bl< /td> 
<td>Ccl< /td> 
</tr> 
< 
<td>RA2< /td> 
<td>B2< /td> 
<td> C2< /td> 
</tr> 
</table> 
< /body> 
</html> 
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在 浏览 器 中 运行 效果 如 图 7-6 所 示 。 





/ DD example html x\ 


后 3 CC Dfile///D:/code/example.html 家 | 忌 三 




















图 7-6 表格 背景 演示 效果 


725 设置 表格 单元 格 间 距 


表格 的 单元 格 和 单元 格 之 间 ,可 以 设 定 一 定 的 距离 ,这 样 可 以 使 表格 显得 不 会 过 于 紧 
凑 , 单 元 格 之 间 的 距离 是 由 cellspacing 的 值 来 决定 的 。 


cellspacing="" 
例 7-6 的 代码 如 下 。 


<-- 例 7-6--> 
< !DOCTYPE html> 
<html> 
<head> 
<meta charset= "utf- 8"> 
<title>< /title> 
</head> 
<body> 
<table border=1 cellspacing="10"> 
<caption> 单 元 格 间 距 < /caption> 
<tr> 
<td>al< /td> 
<td>Bl< /td> 
<td>Ccl< /td> 
</tr> 
< 
<td>a2< /td> 
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<td>B2< /td> 
<td> C2< /td> 
</tr> 
</table> 
< /body> 
</htm> 


在 浏览 器 中 运行 效果 如 图 7-7 所 示 。 
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图 7-7 表格 间距 演示 效果 


726 设置 表格 单元 格 边 距 
边 距 指 的 是 表格 的 单元 格 的 内 容 与 单元 格 边 界 之 间 空 白 距 离 的 大 小 。 
cellpadding= 具 体 的 值 
例 7-7 的 代码 如 下 。 


<-- 例 7-7--> 
< !DOCTYPE html> 
<html> 
<head> 
<meta charset= "utf- 8"> 
<title>< /title> 
</head> 
<body> 
<table border=1 cellpadding=10> 
<caption> 单 元 格 边 距 < /caption> 
<tr> 
<td>Al< /td> 
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<td>Bl< /td> 
<td>cl< /td> 
</tr> 
<tr> 
<td>R2< /td> 
<td>B2< /td> 
<td> C2< /td> 
</tr> 
</table> 
< /body> 
</html> 


在 浏览 器 中 运行 效果 如 图 7-8 所 示 。 
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图 7-8 单元 格 边 距 演 示 效 果 


坟 注意 : 需要 区 分 的 是 ,单元 格 边 距 (表格 填充 )(cellspacing) 代 表单 元 格外 面 的 一 
个 距离 ,用 于 隔 开 单 元 格 与 单元 格 的 空间 ,单元 格 间距 (表格 间距 )(cellpadding) 代 表 表 格 
边框 与 单元 格 补 白 的 距离 ,也 是 单元 格 补 白 之 间 的 距离 。 

727 设置 表格 的 水 平 对 齐 属 性 


类 似 文 档 , 表 格 也 有 align 属性 ,align 属性 规定 表格 相对 于 周围 元 素 的 对 齐 方式 。 通 
常 来 说 ,HTML 表格 的 前 后 都 会 出 现 折 行 。 通 过 运用 align 属性 ,可 实现 其 他 HTML 元 
素 围 绕 表 格 的 效果 。align 的 取 值 有 三 个 ,分 别 是 left、right、center, 分 别 对 应 居 左 、 居 右 、 
居中 。 


<tablealign="">…< /table> 


例 7-8 的 代码 如 下 。 


这 = 二 错 二 人 =3 
< !DocTYPE html> 
<html> 
<head> 
<meta charset= "utf- 8"> 
<title>< /title> 
< /head> 
<body> 
<table border=1 align= "center"> 
<caption> 表 格 居中 < /caption> 
<tr> 
<td>Al< /td> 
<td>Bl< /td> 
<td> cl< /td> 
</tr> 
<tr> 
<td>R2< /td> 
<td>B2< /td> 
<td> c2< /td> 
</tr> 
</table> 
< /body> 
</html> 


在 浏览 器 中 运行 效果 如 图 7-9 所 示 。 
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图 7-9 水 平 对 齐 演示 效果 
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7.3 设置 行 的 属性 
每 个 表格 都 有 自己 的 属性 。 为 了 细 化 表格 的 属性 组 成 ,我 们 来 进一步 学 习 行 的 属性 。 
731 行内 容 水 平 对 齐 


类 似 表格 的 水 平 对 齐 方式 ,行内 容 水 平 对 齐 方式 的 属性 也 是 align, 它 同样 也 有 三 个 
值 , 分 别 是 left right center。 
例 7-9 的 代码 如 下 。 


<-- 例 7-9--> 
< !DOCTYPE html> 
<html> 
<head> 
<meta charset= "utf- 8"> 
<title>< /title> 
</head> 
<body> 
<table border=1 width= "200"> 
<caption> 内 容 居 中 < /caption> 
<tr align= "center"> 
<td>Al< /td> 
<td>Bl< /td> 
<td>cl< /td> 
</tr> 
<tr> 
<td>R2< /td> 
<td>B2< /td> 
<td> c2< /td> 
< /tr> 
</table> 
< /body> 
</html> 


在 浏览 器 中 运行 效果 如 图 7-10 所 示 。 在 图 7-10 中 ,第 二 行 没 有 设置 居中 。 
732 行内 容 垂直 对 齐 
垂直 对 齐 类 似 水 平 对 齐 ,对 每 一 行 的 内 容 设 置 它 在 垂直 方向 上 的 对 齐 方式 ,valign 有 
三 个 取 值 ,分 别 是 top 表示 置顶 ,middle 表示 垂直 居中 ,bottom 表示 垂直 居 下 。 

3 注意 : 在 使 用 的 时 候 要 注意 与 align 的 区 别 。 

例 7-10 的 代码 如 下 。 


<-- 例 7-10--> 
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图 7-10 行内 容 水 平 对 齐 演示 效果 
< !DOCTYPE html> 
<html> 
<head> 


<meta charset= "utf- 8"> 


<title>< /title> 
</head> 


<body> 








<table border= 1 width= "200px" height= "200px"> 
<caption> 行 垂直 对 齐 < /caption> 
<tr valign= "top"> 
<td>Al< /td> 
<td>Bl< /td> 
<td>cl< /td> 
< /tr> 
<tr valign= "middle"> 
<td>Al< /td> 
<td>Bl< /td> 
<td>cl< /td> 
</tr> 
<tr valign= "bottom"> 
<td>R2< /td> 
<td> B2< /td> 
<td> C2< /td> 
</tr> 
</table> 
</body> 
</html> 
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在 浏览 器 中 运行 效果 如 图 7-11 所 示 。 
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图 7-11 行内 容 垂直 对 齐 演示 效果 


7.4 设置 单元 格 的 属性 


整个 表格 的 样式 是 由 每 个 单元 格 组 成 的 , 当 我 们 设置 了 每 个 单元 格 的 属性 的 时 候 , 组 
成 的 就 是 整个 表格 的 整体 样式 。 在 实际 应 用 中 只 设置 样式 远 远 不 够 ,有 时 候 还 会 对 单元 
格 进行 划分 与 合并 ,合并 的 方向 有 两 种 ,一 种 是 上 下 合并 , 另 一 种 是 左右 合并 。 


741 设置 单元 格 跨行 
上 下 单元 格 的 合并 需要 为 二 td 二 标记 增加 rowspan 属性 ,格式 如 下 。 
<td rowspan= "数值 "> 单元 格 内 容 < /td> 
例 7-11 的 代码 如 下 。 


<-- 例 7-11--> 
< IDOCTYPE html> 
<html> 
<head> 
<meta charset="utf- 8"> 
<title>< /title> 
</head> 
<body> 
<table border=1> 
<caption> 上 下 行 合并 < /caption> 
<tr> 


<td rowspan= 3> 三 行 < /td> 
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<td>Bl< /td> 
<td> cl< /td> 
</tr> 
<tr> 
<td>Bl< /td> 
<td> Cl< /td> 
</tr> 
<tr> 
<td>B2< /td> 
<td>C2< /td> 
</tr> 
</table> 
< /body> 
</html> 


在 浏览 器 中 运行 效果 如 图 7-12 所 示 。 
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图 7-12 单元 格 跨行 演示 效果 


其 中 ,rowspan 属性 的 取 值 为 数值 型 整数 数据 ,代表 几 个 单元 格 进行 上 下 合并 。 在 
例 7-11 中 ,rowspan 王 3 代表 将 第 一 列 的 三 个 单元 格 进行 合并 。 


742 设置 单元 格 跨 列 


左右 跨 列 合并 需要 使 用 二 td 二 标记 的 colspan 属性 来 完成 。 
例 7-12 的 代码 如 下 。 


<-- 例 7-12--> 
< !DOCTYPE html> 
<html> 

<head> 
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<meta charset= "utf- 8"> 
<title>< /title> 
</head> 
<body> 
<table border=1> 
<caption> 左 右 合并 < /caption> 
<tr> 
<td colspan= 3> 三 列 < /td> 
</tr> 
<tr> 
<td>R2< /td> 
<td>B2< /td> 
<td> C2< /td> 
</tr> 
<tr> 
<td>A3< /td> 
<td>B3< /td> 
<td> C3< /td> 
</tr> 
</table> 
< /body> 
</html> 


合并 单元 格 以 后 ,相应 的 单元 格 标记 就 应 该 减少 。 在 例 7-12 中 ,第 一 行 
C3 单元 格 的 二 td 二 三/td 二 的 标记 就 应 该 丢掉 ,否则 单元 格 就 会 多 出 ,并 且 后 
依次 向 后 位 移 。 

在 浏览 器 中 运行 效果 如 图 7-13 所 示 。 
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图 7-13 单元 格 列 合并 演示 效果 


7.5 表格 铸 套 
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顾名思义 ,表格 的 戏 套 就 是 在 一 个 单元 格 里 面 再 能 和 人 一 个 或 多 个 表格 。 在 实际 的 开 


具体 的 语法 格式 如 下 。 


<table border=1> 
<tr> 
<td> 
<table border= 1> 


</table> 
</td> 
</tr> 
</table> 


以 上 代码 的 可 读 性 不 高 ,所 以 我 们 来 看 一 个 实例 。 
例 7-13 的 代码 如 下 。 


<-- 例 7-13--> 
< !DOCTYPE html> 
<html> 
<head> 
<meta charset= "utf- 8"> 
<title></title> 
</head> 
<body> 


<table border=1> 
<caption> 表 格 典 套 < /caption> 
<tr> 
<td>Al< /td> 
<td>Bl< /td> 
<td>cl< /td> 
<Hex> 
<tr> 
<td>RA2< /td> 
<td>B2< /td> 
<td> C2< /td> 
</tr> 
<tr> 
<td>A3< /td> 
<td>B3< /td> 


发 中 ,表格 布局 以 及 表格 的 嵌 套 布局 只 是 页 面 布局 方法 的 一 种 ,在 后 续 的 学 习 中 将 接触 到 
更 多 的 布局 的 技巧 。 
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<td> 
<table border=1> 

<caption> 表 格 被 嵌 套 < /caption> 

<tr> 
<td>Al< /td> 
<td>Bl< /td> 
<td>cl< /td> 

</tr> 

i 
<td>a2< /td> 
<td> C2< /td> 

</tr> 

<tr> 
<td>R3< /td> 
<td>B3< /td> 
<td> C3< /td> 

</tr> 

</table> 
</td> 
</tr> 
</table> 
< /body> 
</html> 


在 处 理 分 组 伸缩 的 界面 功能 时 ,经 常会 用 到 表格 的 嵌 套 ,在 处 理 后 台 与 前 台 的 交互 ， 
也 会 用 到 表格 髋 套 。 表 格 的 嵌 套 用 途 非常 广泛 ,考虑 到 后 期 布局 的 维护 ,一 般 不 建议 使 用 
表格 的 嵌 套 。 

在 浏览 器 中 运行 效果 如 图 7-14 所 示 。 
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图 7-14 表格 嵌 套 演示 效果 
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7.6 上 机 练习 


本 章 我 们 接触 了 很 多 关于 表格 的 属性 。 下 面 通过 一 个 综合 实例 来 进一步 加 深 对 表格 
的 理解 ,该 实例 是 一 个 个 人 信息 提交 的 页 面 。 
例 7-14 的 代码 如 下 。 


<-- 例 7-14--> 
< !DOCTYPE html> 
<html> 
<head> 
<title>< /title> 
<meta charset= "utf- 8"> 
</head> 
<body> 
<table border= "3" align= "center"> 
<caption> 个 人 基本 信息 < /caption> 
<tr> 
<td> 姓 名 < /td> 
<td> 
< input type= "text"> 
</td> 
<tq> 民族 < /td> 
<td> 
< input type= "text"> 
</td> 
<td> 性 别 < /td> 
<td> 
< input type= "text"> 
</td> 
</tr> 
<tr> 
<td> 家 庭 住址 < /td> 
<td colspan= "5">< /td> 
</tr> 
<tr> 
<td> 手 机 号 码 < /td> 
<td colspan= "2">< /td> 
<td> 个 人 邮箱 < /ta> 
<td colspan= "2">< /td> 
</tr> 
<tr> 
<td> 职 业 < /ta> 
<td colspan= "2">< /td> 
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< 


<td> 单 位 名 称 < /td> 


<td colspan="2">< /td> 


EE 
<td height="100"> 个 人 评价 < /td> 
<td colspan="5">< /td> 

</tr> 

<tr> 
<td height= "100"> 个 人 经 历 < /td> 
<td colspan= "5">< /td> 

</tr> 

</table> 
< /body> 
</html> 


在 浏览 器 中 运行 效果 如 图 7-15 所 示 。 
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图 7-15 综合 实例 显示 效果 


本 实例 主要 采用 表格 布局 的 方式 来 进行 布局 ,其 中 包括 单元 格 的 行 合 并 、 列 合并 以 及 
后 续 要 学 习 的 表单 的 综合 。 在 此 需要 说 明 一 点 ,在 实际 的 网 页 项 目 中 ,建立 的 网 页 中 如 果 
有 层 层 倒 到 的 嵌 套 表格 ,会 变 得 越 来 越 难以 维护 ,每 次 修改 都 意味 着 改动 一 个 或 多 个 表 
格 ,因此 要 注意 别 破坏 整个 网 页 的 布局 。 此 外 ,如 果 表 格 使 用 大 量 的 标记 ,使 用 占 位 图 像 
强行 控制 表单 布局 ,会 占用 一 定 的 带宽 ,在 页 面 下 载 到 浏览 器 之 后 处 理 并 显示 表格 也 需要 
时 间 。 屏 幕 的 阅读 器 和 文本 浏览 器 处 理 表格 的 方式 通常 与 处 理 其 他 内 容 的 方式 不 同 ,这 
给 用 户 带 来 过 多 时 间 的 浪费 。 

所 以 在 实际 的 项 目 中 很 少 使 用 表格 布局 ,但 是 ,在 实际 的 网 站 项 目 中 ,后 台数 据 展示 ， 
用 表格 就 很 容易 ,因为 后 台 的 数据 经 常 变化 ,所 以 用 表格 动态 展示 ,还 是 比较 合理 的 。 


无 论 是 实现 功能 还 是 展示 页 面 中 的 元 素 , 表 单 在 HTML 中 都 有 着 不 可 蔡 代 的 作用 。 
HTML5 中 的 表单 在 兼容 原 有 元 素 的 基础 上 ,又 增加 了 许多 新 的 元 素 类 型 ,如 email url、 
range 等 ,而 且 还 增加 了 许多 新 的 方法 与 属性 , 如 autofocus、 placeholder 等 。 另 外 ， 
HTML5 自身 的 验证 机 制 ,为 开发 人 员 带 来 极 大 的 方便 ,在 很 大 程度 上 提高 了 开发 的 

本 章 重 点 

。 熟练 掌握 input 元 素 的 类 型 

。 掌握 input 元 素 的 公用 属性 

。 掌握 表单 的 验证 方法 和 属性 


8.1 表单 概述 
表单 用 于 接收 不 同类 型 的 用 户 输 入 ,用 户 提交 表单 时 向 服务 器 传输 数据 ,从 而 实现 用 


户 与 Web 服务 器 的 交互 。 
表单 的 工作 机 制 如 图 8-1 所 示 。 





访问 一 个 包含 表 
单 的 页 而 ， 输 入 
数据 之 后 “ 提 



































交 "” 表单 
浏览 器 。 
Web 服 务 器 
服务 器 处 理 后 - i 
返回 给 浏览 内 











图 8-1 表单 的 工作 机 制 


8.1.1 表单 的 结构 


二 form 这 标签 用 于 为 用 户 输入 创建 HTML 表单 。 表 单 能 够 包含 input 元 素 ,比如 文 
本 字段 、 复 选 框 . 单 选 框 提交 按钮 等 。 表 单 还 可 以 包含 menus \textarea \fieldset legend 
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和 label 元 素 。 表 单 用 于 向 服务 器 传输 数据 。 


< form action= "url" method= "get |post" enctype= "mime"> 
< /form> 


其 中 ,action 二 "url" 指 处 理 提交 的 格式 , 它 可 以 是 一 个 URL 地 址 或 一 个 电子 邮件 地 
址 。method 王 "get" 或 "post" 指 提交 表单 的 HTTP 方法 。enctype 二 "mime" 指 用 来 把 表 
单 提交 服务 器 时 的 互联 网 媒体 形式 。 

在 定义 表单 的 时 候 , 要 指定 表单 控件 的 类 型 ,具体 的 类 型 将 在 后 续 的 学 习 中 一 一 
介绍 。 


8.12 表单 的 处 理 


表单 的 基本 属性 如 表 8-1 所 示 。 
表 8-1 表单 属性 解析 表 























属 性 值 描 述 
accept-charset charset_list 规定 服务 器 可 处 理 的 表单 数据 字符 集 
action URL 规定 当 提 交 表 单 时 向 何 处 发 送 表单 数据 
autocomplete on/off 规定 是 否 启用 表单 的 自动 完成 功能 
method get/ post 规定 用 于 发 送 form-data 的 HTTP 方法 
name form_name 规定 表单 的 名 称 
novalidate novalidate 如 果 使 用 该 属性 , 则 提交 表单 时 进行 验证 

_blank 
_self 
target _parent 规定 在 何 处 打开 action URL 
-top 
framename 








对 于 表单 的 数据 处 理 , 在 此 不 再 闭 述 ,因为 表单 数据 的 处 理 , 牵 涉 到 后 台 的 编程 。 男 
外 ,表单 的 样式 也 可 以 借助 CSS 来 进行 设置 。 


813 HTML5 表 单 的 特性 


HTML5 Web Forms 2.0 是 对 目前 Web 表单 的 全 面 提升 , 它 在 保持 了 简便 易 用 的 特 
性 的 同时 ,增加 了 许多 内 置 的 控件 或 者 控件 属性 来 满足 用 户 的 需求 ,并 且 减 少 了 开发 人 员 
的 编程 。HTML5 的 改进 使 HTML 的 结构 更 加 自由 ,还 新 增 了 表单 控件 类 型 等 。 

比较 高 效 的 控件 类 型 有 如 下 一 些 。 

。 email/url 类 型 


<input type= "email" name= "email"> < /input> 
<input type= "url" name= "url">< /input> 


必须 输入 正确 的 email/url 地 址 .表单 才能 正常 提交 。 


。 search 


<input type= "search" search= "s">< /input> 
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此 类 型 表示 输入 的 将 是 一 个 搜索 关键 字 ,通过 results 一 "s" 可 显示 一 个 搜索 小 图 标 。 


。 number/range 
< input type= "number" name= "points" min= "5" step="5" max= "100" /> 
< input type= "range" name= "points" min= "5" step= "5" max= "100" /> 
不 同 的 数字 输入 模式 。 
» color 
<input type= "color">< /input> 
此 类 型 可 让 用 户 通过 颜色 选择 器 来 选择 一 个 颜色 值 ,并 反馈 到 value 中 。 
。 date/month/week/time/datetime 日 期 选择 器 
<input type= "date" name= "user date" /> 
新 增 的 表单 属性 有 如 下 一 些 。 
»。 placeholder 
<input type= "text" placeholder= "请 输入 用 户 名 "> < /input> 
。， require/pattern 


< input type= "text" name= "require" required=""></input> 
< input type= "text" name= "requirel" required= "required">< /input> 
<input type= "text" name= "require2" pattern="^[1- 9]\d{5}$"></input> 


» autofocus 


<input type= "text" autofocus= "true">< /input> 


当前 页 面 加 载 时 自动 获取 焦点 。 


。， list 


<input type= "text" list="ilist"/> 
<datalist id="ilist"> 

<option label="a" value="a">< /option> 
<option label="b" value= "b">< /option> 
<option label="c! 
</datalist> 


list 属性 规定 输入 域 的 datalist。datalist 是 输入 域 的 选项 列表 。 
。 multiple 规定 输入 域 中 可 选择 多 个 值 





" value="c"> < /option> 


<input type="file" name= "img" multiple= "multiple" /> 


。 XML Submission 编码 格式 
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我 们 一 般 常见 的 Web Form 的 编码 格式 是 application/x-www-form-urlencoded。 开 
发 人 员 都 很 清楚 这 种 格式 ,数据 送 到 服务 器 端 ,可 以 方便 地 存 取 。HTML5 提供 一 种 新 的 
数据 格式 : XML Submission , 即 application/x-www-form 十 xml。 简 单 地 说 ,服务 器 端 将 
直接 接收 到 XML 形式 的 表单 。 


8.2 表单 类 型 


821 创建 文本 框 


文本 框 是 一 种 让 访问 者 自己 输入 的 表单 对 象 ,通常 用 来 填写 单个 字 或 者 简短 的 回答 ， 
例如 用 户 姓名 和 地 址 等 。 其 代码 的 格式 如 下 : 


< input type= "text" name= "name" size= "value" maxlength= "value" value= "value"> 


其 中 type 二 text 定义 单行 文本 输入 框 ,name 属性 定义 文本 框 的 名 称 , 要 保证 数 
据 的 准确 采集 ,必须 定义 一 个 独一无二 的 名 称 ;size 属性 定义 文本 框 的 宽度 ,单位 是 
单个 字符 宽度 ,maxlength 属性 定义 最 多 输入 的 字符 数 ,value 属性 定义 文本 框 的 初 
始 值 。 
例 8-1 的 代码 如 下 。 
<-- 例 8-1--> 
< !DOCTYPE html> 
<html> 
<head> 
<meta charset= "utf- 8"> 
<title>< /title> 
</head> 
<body> 
<form> 
姓名 : 
< input type= "text" name= "name" size= "20" maxlength= "15"> 
<br> 
地 址 : 
< input type= "text" name= "address" size= "20" maxlength= "30"> 
</form> 
< /body> 
</html> 


在 浏览 器 中 运行 效果 如 图 8-2 所 示 。 
822 创建 密码 框 


密码 输入 框 是 一 种 特殊 的 输入 框 , 它 涉 及 用 户 信息 的 安全 性 ,所 以 输入 的 内 容 不 能 以 
明文 显示 ,应 该 显示 为 黑 点 或 者 其 他 的 符号 。 






































西 - oo x 
/ DD example html x\ 
§ 3 CC Bfile///D/code/example.html QB 
姓名 : 
地 址 : 
图 8-2 文本 框 演示 效果 
代码 的 格式 如 下 。 


< input type= "password" name= "name" size= "value" maxlength= "value"> 
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其 中 type 一 password 定义 单行 文本 输入 框 ,name 属性 定义 密码 框 的 名 称 , 要 保证 数 
据 的 准确 采集 ,必须 确保 唯一 性 ; size 属性 定义 密码 框 的 宽度 ,单位 是 单个 字符 宽度 


maxlength 属性 定义 最 多 输入 的 字符 数 。 
例 8-2 的 代码 如 下 。 


<-- 例 8-2--> 
< !DOCTYPE html> 
<html> 
<head> 
<meta charset= "utf- 8"> 
<title>< /title> 
</head> 
<body> 
<form> 
姓名 : 
<input type= "text" name= "name" size= "20" maxlength="15"> 
<br> 


密码 : 


< input type= "password" name= "address" size="20" maxlength= "30"> 


</form> 
< /body> 
</html> 


在 浏览 器 中 运行 效果 如 图 8-3 所 示 。 
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姓名 : html 
密码 : 











图 8-3 密码 框 演示 效果 


823 创建 单 选 按 钮 

单 选 按钮 主要 是 让 用 户 在 一 组 选项 中 只 能 选择 一 个 。 代 码 格式 如 下 。 

<input type= "radio" name= "name" value=""> 

其 中 type 二 radio 定义 单 选 按钮 ,name 属性 定义 单 选 按钮 的 名 称 , 要 保证 数据 的 准确 
采集 ,在 同一 组 的 单 选 按钮 必须 用 同一 个 名 称 ;value 属性 定义 单 选 按钮 的 值 , 在 同一 组 中 
它们 的 值 域 必须 是 不 同 的 。 

例 8-3 的 代码 如 下 。 


<-- 例 8-3--> 
< IDOCTYPE html> 





<html> 
<head> 
<meta charset= "utf- 8"> 
<title>< /title> 
</head> 
<body> 
<form> 


<input type= "radio" name= "jop" value="jopl"> 软 件 工程 师 <br> 





<input type= "radio" name= "jop" value="jop2"> 测 试 工程 师 <br> 
< input type= "radio" name="jop" value="jop3">UI 工程 师 <br> 
< input type= "radio" name= "jop" value= "jop4"> 网 络 工 程 师 <br> 
< /form> 
</body> 
</html> 
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在 浏览 器 中 运行 效果 如 图 8-4 所 示 。 
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目 软 件 工程 师 
目测 试 工程 师 
目 册 工程师 

国 网 络 工程 师 








图 8-4 单 选 按钮 演示 效果 


824 创建 复 选 框 


复 选 框 就 是 让 用 户 在 一 组 选项 中 可 以 选择 多 个 选项 ,每 个 复 选 框 都 是 独立 的 元 素 。 
格式 代码 如 下 。 


< input type= "checkbox" name= "value" value=""> 


其 中 type 二 "checkbox" 是 定义 一 个 复 选 框 ,在 同一 组 中 复 选 框 的 名 字 必 须 相 同 ， 
value 定义 复 选 框 的 值 。 
例 8-4 的 代码 如 下 。 


<-- 例 8- 4--> 
< !DOCTYPE html> 
<html> 
<head> 
<meta charset= "utf- 8"> 
<title>< /title> 
</head> 
<body> 
<form> 
<input type= "checkbox" name= "jop" value= "jop1"> 软 件 工程 师 <br> 
< input type= "checkbox" name= "jop" value= "jop2"> 测 试 工程 师 <br> 
< input type= "checkbox" name= "jop" value= "jop3">UI 工程 师 <br> 
< input type= "checkbox" name= "jop" value= "jop4"> 网 络 工程 师 <br> 
< /form> 
</body> 
</html> 
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在 浏览 器 中 运行 效果 如 图 8-5 所 示 。 
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目 软 件 工程 师 
目测 试 工程 师 
国 U 工 程 师 

国 网 络 工程 师 




















图 8-5 复 选 框 演示 效果 


825 创建 提交 按钮 和 重 置 按钮 


在 用 户 填写 完 信息 后 ,需要 提交 给 服务 器 , 当 用 户 因为 意外 原因 要 重 置 自己 所 填 的 项 
时 ,就 需要 重 置 按钮 和 提交 按钮 。 代 码 格式 如 下 。 


< input type= "submit |reset" name="" value=""> 


在 type 二 "submit|reset" 如 果 type 的 值 是 submit, 则 定义 的 是 提交 按钮 ;如 果 值 是 
reset, 则 定义 的 是 重 置 按钮 ,其 中 name 属性 定义 提交 按钮 的 名 称 ;value 定义 的 是 按钮 的 
显示 文字 。 提 交 按钮 会 把 表单 内 容 提 交 到 action 所 指向 的 文件 ,而 重 置 按 钮 则 把 用 户 所 
填 的 内 容 清空 。 

例 8-5 的 代码 如 下 。 


<-- 例 8-5--> 
< !DOCTYPE html> 
<html> 
<head> 
<meta charset="utf- 8"> 
<title>< /title> 
</head> 
<body> 
<fom> 
<h4> 请 选择 你 的 职业 :< /h4> 
< input type= "checkbox" name= "jop" value= "jop1"> 软 件 工程 师 <br> 
< input type= "checkbox" name= "jop" value= "jop2"> 测 试 工程 师 <br> 
< input type= "checkbox" name= "jop" value= "jop3">UI 工程 师 <br> 
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< input type= "checkbox" name= "jop" value= "jop4"> 网 络 工程 师 <br> 
<input type= "reset" name= "reset" value= " 重 置 "> 





<input type= "submit" name= "submit" value= "提交"> 
< /form> 
< /body> 
</html> 


在 浏览 器 中 运行 效果 如 图 8-6 所 示 。 
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请 选择 你 的 职业 : 


国 软件 工程 师 
国 测试 工程 师 
国 朵 工程 师 


加 网 络 工程 师 








图 8-6 重 置 和 提交 按钮 演示 效果 


826 创建 隐藏 字段 
根据 需求 可 以 创建 一 个 隐藏 字段 ,其 代码 格式 如 下 。 


<input type= "hidden" name="" value=""> 
例 8-6 的 代码 如 下 。 


<-- 例 8-6--> 
< !DOCTYPE html> 
<html> 
<head> 
<meta charset= "utf- 8"> 
<title>< /title> 
</head> 
<body> 
<form> 
<h4> 隐 藏 字段 < /h4> 
< input type= "hidden"> 
< /form> 
< /body> 
</htm> 
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在 浏览 器 中 运行 效果 如 图 8-7 所 示 。 

















西 - o x 
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€ 3 © Dfile///D:/code/example.html 究 | 久 三 
隐藏 字段 








图 8-7 隐藏 字段 演示 效果 


所 谓 的 隐藏 只 是 在 前 台 页 面 上 看 不 到 ,但 是 在 提交 时 可 以 获取 隐藏 字段 里 面 的 
数据 。 


827 创建 电子 邮件 框 


这 是 HTML5 的 新 增 类 型 ,只 需 将 type 设置 为 “email”, 就 可 以 在 页 面 中 创建 一 个 专 
门 用 于 输入 邮件 地 址 的 文本 输入 框 , 该 文本 框 和 其 他 的 输入 框 在 页 面 显示 时 没有 区 别 , 专 
门 用 于 接受 E-mail 地 址 信息 。 因 此 , 当 提 交 表 单 时 ,将 会 自动 检测 文本 框 中 的 内 容 是 否 
符合 E-mail 邮件 地 址 格式 。 


<input type= "email" name="" value=""> 


type 二 "email" 设 置 为 电子 邮件 类 型 ,name 设置 输入 框 的 名 字 ,value 是 输入 框 的 值 。 

我 们 可 以 看 得 出 ,这 样 极 大 地 减少 了 编程 人 员 的 工作 量 。 如 果 填 写 的 格式 不 符合 电 
子 邮 件 的 格式 ,那么 在 单 击 “提交 ”按钮 时 会 报错 。 

例 8-7 的 代码 如 下 。 


<-- 例 8-7--> 
< !DOCTYPE html> 
<html> 
<head> 
<meta charset= "utf- 8"> 
<title>< /title> 
</head> 
<body> 
<form> 


<input type= "email" name= "email"> 
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< input type= "submit"> 
</form> 
< /body> 
</html> 


在 浏览 器 中 运行 效果 如 图 8-8 所 示 。 
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加 请 在 电子 邮件 地 址 中 包 | 
插 "@”。"dssa" 中 缺少 "@。 











图 8-8 电子 邮件 框 演示 效果 


828 搜索 框 


搜索 框 经 常用 于 关键 字 的 查询 ,该 类 型 的 输入 框 与 文本 类 型 的 输入 框 在 功能 上 没有 
太 大 的 区 别 , 都 是 用 于 接收 用 户 输入 的 查询 关键 字 , 但 在 页 面 展 示 时 , 却 有 细微 的 区 别 。 
当 开始 在 输入 框 填写 内 容 时 ,输入 框 的 右 侧 , 将 会 出 现 一 个 “X”, 单 击 该 图 标 , 将 清空 在 输 
入 框 中 的 内 容 , 使 用 十 分 方便 。 格 式 代 码 如 下 。 


<input type= "search" name="" value=""> 
例 8-8 的 代码 如 下 。 


<-- 例 8-8--> 
< !DOCTYPE html> 
<html> 
<head> 
<meta charset= "utf- 8"> 
<title>< /title> 
</head> 
<body> 
< form> 
<input type= "search" name= "email"> 


</form> 


HIMS 网 页 设计 教程 


</body> 
</html> 


在 浏览 器 中 运行 效果 如 图 8-9 所 示 。 
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图 8-9 搜索 框 演示 效果 


829 电话 框 


用 户 经 常会 遇 到 输入 电话 的 情景 ,电话 框 很 好 地 实现 了 这 种 功能 。 这 个 效果 在 手机 
浏览 器 效果 会 明显 , 当 我 们 输入 时 ,输入 键盘 会 自动 切换 到 全 数字 的 模式 。 


<input type= "tel" name=""> 
例 8-9 的 代码 如 下 。 


<-- 例 8-9--> 
< !DOCTYPE html> 
<html> 
<head> 
<meta charset= "utf- 8"> 
<title>< /title> 
</head> 
<body> 
<h4> 电 话 号 码 :< /h4> 
<form> 
<input type= "teln name= "filen><br> 
< input type= "submitn> 
</form> 
</body> 
</html> 


在 浏览 器 中 运行 效果 如 图 8-10 所 示 。 


8210 网 址 框 


网 址 类 型 的 输入 框 主要 用 于 用 户 Web 站 点 地 址 。 
Web 地 址 的 格式 与 普通 文本 有 些 区 别 , 为 了 确保 网 址 
类 型 的 输入 框 能 够 正确 提交 符合 格式 的 内 容 , 表 单 在 
提交 前 会 对 其 内 容 格 式 的 有 效 性 进行 自动 验证 ,如 果 
不 符合 对 应 的 格式 , 则 会 出 现 相应 的 错误 提示 信息 。 
代码 格式 如 下 。 

<input type= "url" name="" value=""> 

例 8-10 的 代码 如 下 。 


<-- 例 8-10--> 
< !DOCTYPE html> 
<html> 
<head> 
<meta charset= "utf- 8"> 
<title>< /title> 
< /head> 
<body> 
<form> 
<input type= "url" name= "email"> 
<input type= "submit"> 
</fom> 
< /body> 
</html> 


在 浏览 器 中 运行 效果 如 图 8-11 所 示 。 
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图 8-10 电话 框 演示 效果 
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图 8-11 网 址 框 演示 效果 
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8211 数字 框 


在 HTML5 之 前 要 确定 输入 一 个 指定 范围 的 数字 ,需要 在 提交 之 前 进行 复杂 的 代码 
检测 ,而 HTML5 中 ,只 需要 创建 一 个 数字 输入 框 即 可 。 格 式 代码 如 下 。 


< input type= "number" name="" value=""> 


其 中 type 二 "number" 设 置 数 字 类 型 输入 框 ,name 表示 输入 框 的 名 字 ,value 表示 输 
入 框 的 值 。 
例 8-11 的 代码 如 下 。 


<-- 例 8-11--> 
< !DOCTYPE html> 
<html> 
<head> 
<meta charset= "utf- 8"> 
<title>< /title> 
< /head> 
<body> 
<form> 
<input type= "number" name= "email"> 
<input type= "submit"> 
</form> 
</body> 
</html> 


在 浏览 器 中 运行 效果 如 图 8-12 所 示 。 
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图 8-12 ”数字 框 演示 效果 





在 图 8-12 中 出 现 了 一 个 微调 控件 , 当 设 定 了 最 大 值 和 最 小 值 ,所 微调 的 范围 也 就 限 
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定 了 。 在 数字 输入 框 中 用 户 不 能 输入 其 他 的 非 数 字 的 字符 ,并 且 当 输入 的 数字 大 于 设 定 
的 最 大 值 或 者 小 于 设 定 的 最 小 值 ,都 将 出 现 数字 输入 出 错 的 提示 信息 。 


8212 日 历 框 


在 HTML4 之 前 的 版 本 中 没有 专门 用 于 显示 日 期 的 文本 输入 框 ,如 果 要 实现 这 种 输 
入 框 ,需要 大 量 的 JavaScript 代码 或 者 导入 相应 的 插件 ,实现 过 程 较 为 复杂 。 日 历 框 的 代 
码 格式 如 下 。 


<input type= "date" name="" value=""> 


type 二 "date" 设 置 输入 框 是 日 期 类 型 ,name 表示 输入 框 的 名 字 ,value 表示 输入 框 的 值 。 
例 8-12 的 代码 如 下 。 


<-- 例 8-12--> 
< !DOCTYPE html> 
<html> 
<head> 
<meta charset= "utf- 8"> 
<title>< /title> 
</head> 
<body> 
<form> 
<input type= "date" name= "email"> 
<input type= "submit"> 
</form> 
</body> 
</html> 


在 浏览 器 中 运行 效果 如 图 8-13 所 示 。 


/ DD example html x\ 
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图 8-13 日 历 框 演示 效果 
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8.3 创建 文本 区 域 


文本 域 主要 用 于 输入 较 长 的 文本 信息 。 代 码 格式 如 下 。 
<textarea name="" cols="" rows="" wrap= "">< /textarea> 


其 中 name 属性 定义 文本 域 的 名 称 ,要 保证 数据 的 准确 采集 ,必须 定义 一 个 独一无二 的 
名 称 ;cols 属性 定义 多 行文 本 域 的 宽度 ,单位 是 单个 字符 宽度 ;rows 属性 定义 多 行文 本 框 的 
高 度 , 单 位 是 单个 字符 的 宽度 。wrap 属性 定义 输入 内 容 大 于 文本 域 时 显示 的 方式 。 

例 8-13 的 代码 如 下 。 


<-- 例 8-13--> 
< !DOCTYPE html> 
<html> 
<head> 
<meta charset= "utf- 8"> 
<title>< /title> 
</head> 
<body> 
<form> 
<textarea name= "text" cols="50" rows= "5"> < /textarea> <br> 
<input type= "submit"> 
</form> 
</body> 
</html> 


在 浏览 器 中 运行 效果 如 图 8-14 所 示 。 
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图 8-14 文本 域 演示 效果 


第 8 章 表单 \@/ 


8.4 创建 选择 框 


列表 框 主 要 用 于 在 有 限 空间 内 设置 多 个 选项 。 列 表 框 既 可 以 用 作 单 选 , 也 可 以 用 作 
复 选 。 代 码 格式 如 下 。 


<select name="" 


size="" muitiple> 

<option value="" selected> 
nde 

</option> 


</select> 


其 中 name 是 多 选 框 的 名 字 , size 是 个 数 ,在 二 option 二 标签 中 ,每 个 二 option 二 的 
value 是 唯一 的 ,selected 表明 当前 是 默认 选中 的 。 
例 8-14 的 代码 如 下 。 


<-- 例 8-14--> 
< !DOCTYPE html> 
<html> 
<head> 
<meta charset= "utf- 8"> 
<title>< /title> 
</head> 
<body> 
<form> 
< select name= "slt" size= "4" muitiple> 
<option value= "1l" selected> 哲 学 
<option value= "2"> 心 理学 
<option value= "3"> 佛 学 
<option value= "4"> 法 学 


</select> 


< /form> 
< /body> 
</html> 


在 浏览 器 中 运行 效果 如 图 8-15 所 示 。 


Ne/ HIMS 网 页 设计 教程 

















= 西 - oo x 
/ D example html x VE 

© 3 © D file///D:/code/example.html > 一 
EE 

心理 学 

佛学 

法 学 











图 8-15 选择 框 演示 效果 


8.5 让 访问 者 上 传 文件 


在 浏览 网 页 的 过 程 中 经 常 遇 到 上 传 文件 的 情况 , 即 是 将 自己 的 文件 上 传 到 远 端 服务 
器 ,上 传 文件 的 第 一 步 , 先 去 浏览 选择 文件 。 代 码 格式 如 下 。 


< input type= "file" name=""> 


type 定义 了 file 类 型 ,name 表示 控件 的 名 称 。 
例 8-15 的 代码 如 下 。 


<-- 例 8-15--> 
< !DOCTYPE html> 
<html> 
<head> 
<meta charset= "utf- 8"> 
<title>< /title> 
</head> 
<body> 
<form> 
<input type= "file" name= "file"><br> 
<input type= "submit"> 
< /form> 
< /body> 
</html> 


在 浏览 器 中 运行 效果 如 图 8-16 所 示 。 
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图 8-16 ”上传 文件 演示 效果 


8.6 上 机 练习 
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市 面 上 的 浏览 器 一 般 都 支持 HTML5 ,例如 Firefox Chrome、Safari IE.360。 虽 然 都 
支持 ,但 是 所 支持 的 情况 不 一 样 ,Chrome 比较 好 一 点 。 下 面 我 们 一 起 完成 一 个 简单 的 个 


人 信息 注册 界面 。 
例 8-16 的 代码 如 下 。 


<-- 例 8-16--> 
< !DOCTYPE html> 


<html> 

<head> 
<title>< /title> 
<meta charset= "utf- 8"> 

</head> 

<body> 
<table align= "center" border="1"> 
<caption> 信 息 注册 < /caption> 
<td> 

<form> 


姓名 :< input type= "text" name= "user_name"> 
性 别 :< select> 
<option value= "1"> 男 
<option value= "2"> 女 
</select><br> 
邮箱 :< input type= "email" name= "user email"><br> 
电话 号 码 :<input type= "tel" name= "user phone"><br> 
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个 人 信息 : 
<br> < textarea name= "text" cols="50" rows="5"> < /textarea> <br> 
<center> 
<input align= "center" type="submit" value= "提交"> 
<input align= "center" type= "reset" value= " 重 置 "> 
</center> 
< /form> 
</td> 
</table> 
< /body> 
</html> 


在 浏览 器 中 运行 效果 如 图 8-17 所 示 。 
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图 8-17 综合 实例 演示 效果 


8.7 本 章 小 结 


本 章 主要 讲述 了 表单 的 类 型 及 其 使 用 方法 。 表 单 是 一 个 十 分 重要 的 页 面 元 素 。 本 章 
先 从 输入 框 开始 ,由 浅 入 深 地 介绍 了 表单 中 各 种 新 增加 元 素 与 属性 的 使 用 方法 。 希 望 读 
者 在 以 后 的 学 习 过 程 中 加 深 对 表单 的 理解 与 运用 。 


CSS3 基础 


学 习 本 章 的 目的 是 了 解 CSS3 的 发 展 历史 ,掌握 它 的 基本 语法 ,并 对 媒体 查询 .选择 
器 、 伪 类 与 伪 元 素 、 网 页 字体 \ 文 本 排版 ,图像 处 理 动画 ,布局 等 一 些 常用 知识 做 到 融会 
贯通 。 

本 章 重点 

。 掌握 选择 器 的 使 用 

。 掌握 样式 表 的 定义 和 使 用 

。 了解 CSS3 中 金子 模型 的 概念 


9.1 CSS 


自从 CSS 诞生 以 来 ,为 Web 的 发 展 做 了 巨大 的 贡献 。 使 用 CSS 设置 Web 样式 ,可 
以 使 页 面 格式 代码 单独 存放 ,不 仅 提高 了 代码 的 利用 率 , 还 提高 了 页 面 的 可 维护 性 。 


911 CSS 简介 


CSS 是 Cascading Style Sheets 的 缩写 ,中文 译 为 层 释 样 式 表 , 是 对 Web 页 面 显 示 效 
果 进 行 控制 的 一 套 标 准 。 存 放 CSS 样式 表 内 容 的 文件 扩展 名 为 ". css”。 


912 从 CSS 到 CSS3 


CSS3 是 CSS 技术 的 升级 版 本 ,CSS3 语言 开发 是 朝 着 模块 化 发 展 的 。 

1994 年 哈 坤 。 利 提出 了 CSS 建议 ,与 当时 正在 设计 浏览 器 的 波 特 。 波 斯 一 起 设计 了 
CSS,1995 年 他 与 波斯 一 起 提出 这 个 建议 时 , 刚 成 立 的 W3C 组 织 对 CSS 的 发 展 很 感 兴 
趣 , 便 专 门 组 织 了 一 次 讨论 会 , 哈 坤 波斯 等 人 是 主要 的 技术 负责 人 。1996 年 年 底 初稿 完 
成 ,CSS1 于 1996 年 12 月 正式 推出 。 

1997 年 ,针对 CSS 中 没有 涉及 到 的 一 些 问 题 进行 了 修整 ,并 于 1998 年 5 月 正式 推 
出 'GSs2。 

2004 年 推出 的 CSS2. 1 则 是 在 CSS2 的 基础 上 稍微 做 了 一 些 调整 。 

CSS3 标准 早 于 1999 年 开始 制定 ,并 于 2001 年 初 提 上 W3C 研究 议程 ,2011 年 6 月 
发 布 了 第 一 个 CSS3 建议 版 本 。 


913 CSS3 新 特性 
总 体 来 说 ,CSS3 主要 拥有 以 下 几 个 新 亮点 : 高 级 选择 器 , 圆 角 ,多 背景 ,@ font-face 
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动画 与 渐变 ,渐变 色 ,Box 阴影 ,RGBA- 加 入 透明 色 ,文字 阴 影 ,图 形 化 边界 。 如 果 能 够 充 
分 发 挥 CSS3 的 新 属性 ,就 能 够 解决 之 前 CSS 版 本 所 不 能 解决 的 一 些 问题 ,上 升 到 一 个 新 


台阶 。 


9.2 样式 表 的 定义 与 使 用 


CSS 样式 表 的 最 大 优势 就 是 运用 灵活 。 它 可 以 像 属 性 一 样 直 接 在 页 面 中 设置 ,也 支 
持 在 独立 的 文件 中 编写 ,在 HTML 中 引入 。 

CSS 有 三 种 定义 样式 的 方式 : 定义 内 联 样式 表 、 定 义 内 部 样式 表 和 链接 外 部 样式 表 。 
下 面 对 这 三 种 样式 进行 详细 的 介绍 。 


921 定义 内 联 样 式 表 


内 联 样 式 规则 只 影响 单个 元 素 。 当 标签 需要 用 到 某 个 样式 时 ,可 以 使 用 内 联 样式 。 
这 里 以 二 p 二 标签 为 例 ,例如 : 


<P style= "color: red; font- size:20px"> // 设 置 字体 颜色 为 红色 ,字号 为 20 
This is CSS. 
</p> 


922 定义 内 部 样式 表 


内 部 样式 表 一 般 写 在 二 head> 二 /head> 中 ,用 一 个 开始 标签 二 style 之 和 一 个 结束 标 
签 一 /style 二 括 起 来 。 例 9-1 设置 当前 页 面 的 字体 样式 为 ”宋体 ”。 


<!-- 例 9-1--> 
< !DOCTYPE html> 
<html> 
<head> 
<title> 网 页 标题 < /title> 
<style> 
body { 
font- family:" 宋 体 "; ”// 设 置 字体 样式 为 "宋体 " 
. 
</style> 
</head> 
<body> 
</body> 
</html> 


一 般 情况 下 , 当 特 别 需要 属于 自己 的 样式 时 ,就 可 以 写成 内 部 样式 。 内 部 样式 也 不 一 
定 必须 写 在 过 head> 过 /head 盖 中 ,可 以 在 页 面 的 任何 位 置 ,但 由 于 代码 读 取 时 是 从 上 到 
下 ,为 了 防止 网 速 慢 的 时 候 加 载 不 出 页 面 样式 ,最 好 放 在 二 head> 标 签 中 先 读 取 。 并 且 使 
用 内 部 样式 的 目的 是 因为 它 包 含 了 关于 页 面 某 个 元 素 的 样式 信息 , 放 在 页 面 的 前 面 方便 
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自己 和 他 人 阅读 代码 。 所 以 ,为 了 统一 ,最 好 是 放 在 二 head 记 二 /head 二 中 。 
923 链接 外 部 样式 表 

CSS 最 方便 之 处 就 是 可 以 内 部 使 用 ,也 可 以 放 在 外 部 文件 中 。 将 CSS 样式 的 代码 放 
在 后 级 名 为 “. css” 的 文件 中 ,在 HTML 页 面 中 引入 该 样式 表 的 文件 。 假 如 要 指定 body 
中 字体 的 样式 。 首 先 建立 一 个 外 部 的 CSS 文件 如 下 。 

body { 


font- family:" 宋 体 "; 
. 


然后 使 用 link 元 素 将 此 文件 引入 到 HTML 中 ,引入 部 分 的 代码 如 下 。 


<link rel= "stylesheet" type= "text/css" href="index.css" /> 


3 注意 : 页 面 中 的 CSS 优先 级 高 于 外 连接 。 内 部 样式 表 只 对 所 在 网 页 有 效 。 因 为 
内 联 样 式 表 将 HTML 和 CSS 混在 了 一 起 ,所 以 应 当 最 后 考虑 使 用 这 种 方式 。 


9.3 定义 选择 器 


选择 器 是 CSS 的 核心 ,使 用 它 可 以 提高 开发 和 修改 样式 表 的 效率 。 选 择 器 大 体 划分 
为 两 种 类 别 。 第 一 种 类 别 包 含 了 类 型 选择 器 .类 选择 器 .选择 元 素 的 一 部 分 和 ID 选择 器 ， 
这 些 统 称 为 DOM 选择 器 ;第 二 种 类 别 包含 伪 选 择 器 。 

通过 使 用 选择 器 ,不 再 需要 在 编辑 样式 时 使 用 多 余 的 或 者 没有 任何 语义 的 class 属 
性 ,而 是 直接 将 样式 与 元 素 绑 定 起 来 ,从 而 节省 在 网 站 或 Web 应 用 程序 完成 之 后 又 要 修 
改 样式 所 花费 的 大 量 时 间 。 如 : 

div[id="div left"] { background:blue; } 

另外 ,可 以 在 指定 样式 的 时 候 使 用 通配符 ,如 “~Y( 开 头 字符 匹配 ) “人 $”( 结 尾 字符 下 
配 ) 和 * * "(包含 字 符 匹 配 )。 例 如 ,指定 id 结尾 字母 为 *s" 的 pb 标签 的 字体 为 “楷体 ”。 


div[id$="s"] { font- family:" 楷 体 "} 


93.1 按照 类 型 选择 元 素 


类 型 选择 器 就 是 CSS 定义 中 的 类 型 选择 器 封装 了 标签 类 型 这 个 选择 条 件 。 标 签 类 
型 是 指 HTML 的 标签 名 称 。 定 义 类 型 选择 器 不 需要 任何 前 绥 符 ,直接 定义 标签 类 型 就 
能 完成 选择 条 件 的 定义 。 类 型 选择 器 让 开发 人 员 能 够 以 标签 类 型 为 单位 来 设置 相同 的 显 
示 样 式 。 

例 9-2 示范 了 如 何在 网 页 中 使 用 类 型 选择 器 。 


<!-- 例 9-2--> 
< IDOCTYPE html> 
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<html lang="en"> 
<head> 
<meta charset= "UTF- 8"> 
<title> 使 用 Type 选择 器 < /title> 
</head> 
<style type= "text/css"> 
Bi 
font- size:20px; 
Color: #£02345; 
} 
af 
color:red; 
} 
</style> 
<body> 
<p> This is Type Class< /p> 
<a href="www.baidu.con"> 百 度 一 下 ,你 就 知道 < /a> 
< /body> 
</html> 


运行 结果 如 图 9-1 所 示 。 


中 使 用 Type 选择 器 xV 
© 3 © Dfile///D:/code/CSS3/index Lhtml 














This is Type Class 


百度 一 下 ， 你 就 知 i 








图 9-1 类 型 选择 器 


932 按照 类 选择 元 素 


类 选择 器 以 标签 样式 类 型 作为 选择 条 件 。 标 签 样式 类 型 就 是 class 属性 ,不 同 的 标签 
能 够 设置 相同 的 class 属性 。 定 义 类 选择 器 需要 有 ”. ”这 个 前 级 符 , 在 “. ”之 后 加 入 标签 的 
class 属性 就 完成 了 选择 条 件 的 定义 。 

例 9-3 示范 了 如 何在 网 页 中 使 用 类 选择 器 。 
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Le 
< !DOCTYPE html> 
<html lang= "en"> 
<head> 
<meta charset= "UTF- 8"> 
<title> 使 用 class 选择 器 < /title> 
< /head> 
<style type= "text/css"> 
.Class_ show{ 
Color:# ff00457 
width:100px; 
height:50px; 
border:1px solid blue; 
} 
</style> 
<body> 
<P class= "class_show"> This is CSS< /p> 
<div class="class show"> 
This is CSS! 
</div> 
< /body> 
</html> 


运行 效果 如 图 9-2 所 示 。 
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his is CSS! 














9-2 ”类 选择 器 示例 


933 按照 ID 选择 元 素 
ID 选择 器 类 似 于 类 选择 器 ,但 也 有 一 些 差别 。ID 选择 器 允许 以 一 种 独立 于 文档 元 素 的 
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方式 来 指定 样式 ,但 都 是 针对 特定 属性 的 属性 值 配 置 的 。 在 CSS 样式 中 定义 ID 选择 器 时 ， 
需要 有 ”“ # ”这 个 前 组 符 , 在 "后面 加 入 标签 的 ID 属性 ,然后 完成 选择 条 件 的 定义 。 
例 9-4 示范 了 如 何在 网 页 中 使 用 ID 选择 器 。 


<!-- 例 9-4--> 
< !DOCTYPE html> 
<html lang= "en"> 
<head> 
<meta charset= "UTF- 8"> 
<title> 使 用 ID 选择 器 < /title> 
</head> 
< style type= "text/css"> 
#id show{ 
Color:# ££0045; 
width:100px; 
height:50px; 
border:1px solid blue; 
} 
</style> 
<body> 
<p>This is CSS< /p> 
<div id="id show"> 
<p>This is CSS!< /p> 
</div> 


运行 效果 如 图 9-3 所 示 。 
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图 9-3 ID 选择 器 
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934 选择 元 素 的 一 部 分 


在 对 某 个 或 某 些 元 素 进行 特殊 效果 的 设置 时 ,为 了 不 影响 其 他 元 素 , 可 以 单独 选择 这 
些 元 素 ,就 产生 了 子 元 素 选择 器 和 多 重 选择 器 。 

(1) 子 元 素 选择 器 只 能 选择 作为 子 元 素 的 元 素 , 即 选择 元 素 的 一 部 分 作为 选择 器 。 
子 选择 器 用 符号 “二 "表示, 它 允 许 定位 某 个 元 素 的 第 一 级 子 元 素 。 

例如 ,如 果 只 选择 Hl 元 素 的 子 元 素 strong, 可 以 这 样 写 : 

hl> strong {color:red;} 

还 可 以 不 加 符号 "二 ”, 例 如 。 

hl strong {color:red;} 


(2) 多 重 选择 器 可 以 有 多 层 , 这 样 做 的 优点 在 于 避免 过 多 的 id、class 属性 设置 ,直接 
对 所 需 的 元 素 进 行 定义 。 





# menu ul li a { display:block; padding: 0 8px; height: 26px; line- height: 26px; float: 
left;} 
#menu ul 1i a:hover { background:#333; color:#fff;} 


刘 注意; 加 上 大 于 号 就 表示 必须 是 “直接 子 元 素 ”, 不 加 的 话 就 是 子 元 素 。 
这 个 规则 会 把 下 面 第 一 个 hl 的 两 个 strong 元 素 变 为 红色 ,但 是 第 二 个 hl 中 的 
strong 不 受 影响 : 


<hl> This is < strong> very< /strong> < strong> very< /strong> important .< /hl> 
<hl> This is <em> really < strong> very< /strong> < /em> important .< /hl> 


(3) 通过 选择 部 分 元 素 , 还 可 以 实现 多 个 元 素 或 标签 设置 为 同一 个 样式 。 多 个 元 素 
或 标签 中 间 用 逗号 "," 隔 开 。 例 如 : 


.divl, .div2, .div3{color:#£00;} // 这 里 表示 的 是 三 个 div 的 颜色 为 红色 
prhl{color:# £00;} //p 标 签 和 hi 标题 颜色 为 红色 


935 伪 类 选择 器 


伪 类 选择 器 与 类 选择 器 的 区 别 是 ,类 选择 器 可 以 重 命名 ,而 伪 类 选择 器 是 CSS 中 已 
经 定义 好 的 选择 器 ,不 可 以 重 命名 。CSS 中 最 常用 的 伪 类 选择 器 是 使 用 在 二 a 二 元 素 上 的 
集中 选择 器 。 例 如 : 


a:link{ 
color:# 000; 
text- decoration:none; 
了 
a:visited{ 


color:# ff1001; 
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text— decoration:none; 
} 
a:hover{ 
color:#£f£1001; 
text— decoration:underline; 
1 
a:active{ 
color:#£f1001; 
text- decoration:underline; 


} 


伪 元 素 选 择 器 并 不 是 针对 真正 的 元 素 而 使 用 的 选择 器 ,而 是 针对 CSS 中 已 经 定义 好 
的 伪 元 素 使 用 的 选择 器 。 使 用 方法 如 下 所 示 : 


选择 器 : 伪 元 素 { 属性 : 值 } 
伪 元 素 选 择 器 可 以 与 类 配合 使 用 ,使 用 方法 如 下 : 
选择 器 . 类 名 : 伪 元 素 { 属性 : 值 } 


CSS 中 主要 有 四 个 伪 元 素 选择 器 ,分 别 是 first-line、first-letter、before 和 after。 

1，first-line 伪 元 素 选择 器 

first-line 伪 元 素 选 择 器 用 于 向 某 个 元 素 中 的 第 一 行文 字 使 用 样式 。 在 例 9-5 中 ， 
一 p 过 元 素 中 有 两 行文 字 , 使 用 first-line 伪 元 素 选择 器 将 第 一 行 设置 为 红色 。 


<!-- 例 9-5-=> 
< !DOCTYPE html> 
<html lang= "en"> 
<head> 
<meta charset= "UTF- 8"> 
<title> first- line 伪 元 素 选 择 器 < /title> 
< style type= "text/css"> 
Pp:first- line{color:red} 
</style> 
</head> 
<body> 
<p> 第 一 行 :first- line 伪 元 素 选择 器 设置 样式 <br> 第 二 行 :没有 设置 样式 < /p> 
</body> 
</html> 


运行 效果 如 图 9-4 所 示 。 

2. first-letter 伪 元 素 选择 器 

first-letter 伪 元 素 选择 器 用 于 向 某 个 元 素 中 的 文字 的 首 字母 或 第 一 个 字 使 用 样式 ， 
如 例 9-6 所 示 。 





/ 口 fist-ine 内 元素 迁 择 二 x 六 
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一 行 :first-1ine 伪 元 素 选择 器 设置 样式 
系 = 行 : 没有 设置 样式 





图 9-4 ”first-line 伪 元 素 选 择 器 


志 == 傅 36--> 
< !DOCTYPE html> 
<html lang= "en"> 
<head> 
<meta charset= "UTF- 8"> 
<title> first- letter 伪 元 素 选择 器 < /title> 
< style type= "text/css"> 
P:first- letter{font- size:30px;} 
</style> 
< /head> 
<body> 
<p> first- letter 伪 元 素 选择 器 < /p> 
<p> 设 置 文字 的 首 字 母 或 第 一 个 字 使 用 样式 。< /p> 
< /body> 
< /html> 


运行 效果 如 图 9-5 所 示 。 
3. before 伪 元 素 选 择 器 
before 伪 元 素 选择 器 用 于 在 某 个 元 素 之 前 插入 一 些 内 容 。 使 用 方法 如 下 : 


<!-- 可 以 插入 文字 --> 

< 元 素 > :before 
content: 插 入 文字 

} 

< 上 !-- 可 以 插入 其 他 内 容 --> 
< 元 素 > :before 
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irst-letter 伪 元 素 选择 器 


设置 文字 的 首 字 母 或 第 一 个 字 使 用 样式 。 





图 9-5 ”first-letter 伪 元 素 选择 器 


content:url (test .wav) 


3 
如 例 9-7 所 示 ,在 每 个 列表 项 目前 的 文字 开头 插入 *。。，。，。，。。 ”字符 。 


< 本 全 
< !DOCTYPE html> 
<html lang= "en"> 
<head> 
<meta charset= "UTF- 8"> 
<title>before 伪 元 素 选择 器 < /title> 
< style type= "text/css"> 
li:before{f 
content:"。 。 。 。 e000n 
} 
</style> 
</head> 
<body> 
<ul> 
<1i> 示 例 1< /1i> 
<1i> 示 例 2< /1i> 
</ul> 
< /body> 
</htm> 


运行 效果 如 图 9-6 所 示 。 
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图 9-6 ”before 伪 元 素 选择 器 


4. after 伪 元 素 选择 器 
after 伪 元 素 选择 器 用 于 在 某 个 元 素 之 后 插入 一 些 内 容 。 如 例 9-8 所 示 ,在 每 个 列表 
项 目 结尾 处 插入 “(这 里 仅 用 于 测试 )” 的 文字 。 


<4== 抽 全 => 
< !DOCTYPE html> 
<html lang= "en"> 
<head> 
<meta charset= "UTF- 8"> 
<title> after 伪 元 素 选择 器 < /title> 
<style type= "text/css"> 
li:after{ 
content:"( 仅 用 于 测试 )"; 
} 
</style> 
</head> 
<body> 
<hl> 音 乐 列表 < /hl> 
<ul> 
<1li><a href= "music.mp3"></a> 一 次 就 好 < /1i> 
<li><a href= "msic.mp3">< /a> Chris Medina -What Are Words< /1i> 
</ul> 
< /body> 
</html> 
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运行 效果 如 图 9-7 所 示 。 
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音乐 列表 


。 一 次 就 好 ( 仅 用 于 测试 ) 
。 Chris Jedina - What Are Words( 仅 用 于 测试 ) 





图 9-7 after 伪 元 素 选择 器 


9.4 文本 与 排版 样式 的 使 用 


CSS3 在 文本 模块 中 引入 一 系列 新 的 特性 ,扩展 了 它 对 字体 排版 的 工具 集 。 
94.1 长 度 、 百 分 比 单位 


1. 绝对 长 度 单位 

(1) 像素 (px) 。 像 素 或 许 被 认为 是 最 好 的 “设备 像素 ”, 而 这 种 像素 长 度 与 在 显示 器 
上 看 到 的 文字 屏幕 像素 无 关 。 像 素 实际 上 是 一 个 按 角 度 度 量 的 单位 。 

在 Web 上 ,像素 仍然 是 典型 的 度量 单位 ,很 多 其 他 长 度 单 位 直接 映射 成 像素 ,最 终 ， 
它们 被 按照 像素 处 理 ,JavaScript 语言 中 的 单位 就 是 像素 。 

(2) 英寸 (in)。 英 寸 是 一 个 物理 度量 单位 ,但 是 在 CSS 领域 ,英寸 直接 映射 成 了 像 
素 。 目 前 ,应 用 到 英寸 的 示例 还 很 少 。 

(3) 厘米 (cm) 。 对 于 大 多 数 的 人 来 说 ,厘米 是 比较 熟悉 的 物理 度量 单位 。 它 也 映射 
成 了 像素 。 

(4) 毫米 (mm) 。 毫 米 是 一 种 小 数量 级 的 物理 度量 单位 。 

2. 相对 字体 的 长 度 

(1) em 是 一 个 相对 单位 。 起 初 的 排版 度量 是 基于 当前 字体 大 写字 母 “M” 的 尺寸 的 。 
当 改 变 font-family 的 大 小 时 , 它 的 尺寸 不 会 发 生 改 变 , 但 在 改变 font-size 的 大 小 时 , 它 的 
尺寸 就 会 发 生变 化 。 

(2) rem 和 em 一 样 ,也 是 一 个 相对 单位 ,但 是 与 em 不同 的 是 ,rem 总 是 相对 于 根 
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元 素 ( 如 root{ )) ,而 不 像 em 使 用 级 联 的 方式 来 计算 尺寸 。 这 种 相对 单位 使 用 起 来 更 
简单 。 

(3) 点 (point) 。point 是 一 个 物理 度量 单位 ,1pt 二 1/72 in。 在 CSS 之 外 point 是 最 
常用 的 尺寸 类 型 。 在 打印 样式 表 和 物理 媒介 中 ,point 是 最 有 意义 的 ,当然 也 可 以 用 在 屏 
幕 媒 介 上 使 用 。 值 得 注意 的 是 ,对 于 不 同 的 浏览 器 ,在 屏幕 呈现 point 的 时 候 , 会 有 很 大 
的 不 同 。 

(4) 派 卡 (pica)。pica 和 point 一 样 ,只 不 过 1pc 一 12pt。 

(5) ex 是 一 个 基于 当前 字体 x 字母 高 度 度 量 的 。ex 度量 有 时 根据 字体 自身 的 信息 ， 
有 时 由 浏览 器 通过 一 个 小 写字 形 来 度量 ,一 般 情况 是 设置 成 0. 5em。 它 之 所 以 被 命名 为 
“x” 的 高 度 , 是 因为 是 基于 x 字母 的 高 度 的 。 要 理解 xheight, 想 象 一 个 小 写字 母 , 比 如 
“d”, 它 会 有 一 部 分 医 起 ,x-height 是 不 包括 翘 起 的 这 一 部 分 的 , 它 的 高 度 是 这 个 字母 最 下 
面 的 那 一 部 分 。 与 em 不 同 , 当 改变 font-family 时 em 不 会 改变 ,而 ex 单位 会 变化 ,因为 
一 个 单位 的 值 和 那个 字体 是 特殊 的 约束 关系 。 

(6) ch 的 内 涵 和 x 高度 相 似 , 只 是 ch 是 基于 数字 0 的 宽度 而 不 是 基于 字符 x 的 高 
度 。 当 font-family 改变 的 时 候 ch 也 会 随 着 改变 。 

傅 提 示 : 在 没有 任何 CSS 规 则 的 前 提 下 ,长 度 关系 是 : lem 一 一 16px 一 一 0. 17in 一 一 
l2pt==1lpc==4.2mm==0. 42cm。 

3. 百分比 

以 百分比 为 单位 的 长 度 值 是 基于 具有 相同 属性 的 父 元 素 的 长 度 值 。 例 如 ,如 果 一 个 
元 素 呈 现 的 宽度 是 450px, 子 元 素 的 宽度 设 为 50% ,那么 子 元 素 呈 现 的 宽度 为 225px。 

侠 提 示 : 像素 和 百分比 是 比较 常用 的 长 度 单位 。 


942 文本 样式 属性 


本 节 针 对 CSS3 中 与 文字 、 字 体 相 关 的 一 些 属性 做 了 详细 介绍 ,其 中 包括 text- 
shadow 属性 、word-break 属性 、word-wrap 属性 、WebFont 与 font-face 属性 以 及 font- 
size-adjust 等 属性 。 

1.text-shadow 属性 

text-shadow 属性 为 文字 添加 阴影 。 此 属性 是 在 CSS2 中 定义 的 ,然而 在 CSS2. 1 中 
由 于 缺乏 实现 被 去 掉 了 。 但 是 在 CSS3 规范 中 又 被 恢复 了 ,并 且 到 目前 为 止 ,Safari 浏览 
器、Firefox、Chrome 以 及 opera 浏览 器 都 支持 该 属性 。 

text-shadow 属性 的 使 用 方法 如 下 : 


text- shadow: length length length color 


前 面 三 个 length 分 别 指 阴影 离开 文字 的 横 方 向 距离 ( 称 为 X 偏离 )、 阴 影 离开 文字 的 
纵 方 向 距离 ( 称 为 Y 偏离 ) 和 阴影 的 模糊 半径 ,color 是 指 阴 影 的 颜色 。 默 认 情况 下 ,阴影 
的 颜色 是 从 其 父 元 素 中 继承 而 来 的 (通常 是 黑色 ) ,阴影 的 模糊 半径 是 0。 


RC 


地 
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加 阴影 让 文字 凸显 出 来 ,更 加 容易 分 辨 , 在 例 9-9 中 展示 了 其 效果 。 





<!-- 例 9-9--> 
< !DOCTYPE html> 


<html lang= "en"> 


<head> 


<meta charset= "UTF- 8"> 


<title> 给 文字 添加 阴影 < /title> 


</head> 


<style type= "text/css"> 


div{ 


} 


text- shadow: 5px 5px 5px gray; 
color:blue; 

font- size:50px; 

font- weight :bold; 

font- family:" 宋 体 "; 


</style> 


<body> 


<div> text- shadow< /div> 


< /body> 


</html> 


从 上 述 代码 中 可 以 看 到 ,设置 文字 的 属性 还 有 : 
(1) font-size 设置 字体 大 小 。 
(2) font-weight 设置 字体 是 否 加 粗 , 如 表 9-1 所 示 。 


表 9-1 字体 属性 值 及 其 含义 























值 含义 
normal 默认 值 。 定 义 标 准 的 字符 
bold 定义 粗 体 字符 
bolder 定义 更 粗 的 字符 
lighter 定义 更 细 的 字符 
inherit 规定 应 该 从 父 元 素 继承 字体 的 粗细 
100 一 700 定义 由 粗 到 细 的 字符 ,400 等 于 normal, 而 700 等 同 于 bold 








(3) font-family 设置 字体 样式 。 

运行 效果 如 图 9-8 所 示 。 

也 可 以 指定 多 个 阴影 ,并 且 针 对 每 个 阴影 使 用 不 同 的 颜色 。 指 定 多 个 阴影 时 ,用 逗号 
将 多 个 阴影 进行 分 隔 。 在 例 9-10 中 为 文字 指定 了 不 同 颜色 的 阴影 ,并 且 为 这 些 阴 影 指 定 


/中 给 文字 添加 阴影 x\ 
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text—shadow 





图 9-8 text-shadow 实现 阴影 效果 
了 适当 的 位 置 。 


<4=-= 例 9-10-=> 
< !DOCTYPE html> 
<html lang= "en"> 
<head> 
<meta charset= "UTF- 8"> 
<title> 给 文字 添加 阴影 < /title> 
</head> 
<style type= "text/css"> 
div{ 
text- shadow:10px 10px orange, 
40px 35px yellow, 
70px 60px # cOfe00; 
color: navy; 
font— size: 50px; 
font- weight: bold; 
font- family: "宋体 "; 
+ 
</style> 
<body> 
<div> Hello World!< /div> 
< /body> 
</html> 


运行 效果 如 图 9-9 所 示 。 
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图 9-9 ”text-shadow 实现 多 重 阴 影 效果 


2. word-wrap 属性 

word-wrap 属性 是 设置 文本 的 控制 换行 。 当 文字 在 指定 区 域 显示 一 整 行文 字 时 ,如 
果 一 行 显示 不 完 , 就 需要 换行 。 如 果 不 换行 ,就 会 超出 指定 的 区 域 范围 。 在 CSS3 中 ， 
word-wrap 属性 允许 对 文本 强制 换行 , 即 允 许 对 长 单词 进行 拆 分 ,并 换行 到 下 一 行 。 
word-wrap 语法 格式 如 下 。 


word- wrap: normal | break- word 


normal 是 控制 连续 文本 换行 ,指定 文本 行 只 能 在 两 个 单词 之 间 折 断 。 
break-word 将 在 边界 内 换行 ,如 果 需 要 , 词 内 换行 也 会 发 生 。 人 允许 单词 在 需要 防止 
溢出 父 元 素 的 时 候 折 断 ,如 例 9-11 所 示 。 


<!-- 例 9-11--> 
< !DOCTYPE html> 
<html lang= "en"> 
<head> 
<meta charset= "UTF- 8"> 
<title> 长 的 单词 或 者 URL 强制 换行 < /title> 
</head> 
<style type= "text/css"> 
.break{ 
width:100px; 
height :300px; 
word- wrap:break- word; 
border:lpx solid red; 
FE 
</style> 
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<body> 
<div>Hello World!< /div> 
<div class= "break"> 


The word - wrap property is set up the text 
control linePneumonoultramicrpscopicsilicovolcanoconi 
</div> 


< /body> 
</html> 


运行 效果 如 图 9-10 所 示 。 
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图 9-10 应 用 了 break-word 属性 的 文本 (上 ) 与 没有 应 用 的 效果 (下 ) 


3. WebFont 与 font-face 属性 


在 CSS3 之 前 ,如 果 在 样式 表 中 指定 的 字体 不 能 正常 显示 时 将 使 用 蔡 代 字体 ,但 是 如 
果 这 个 蔡 代 字体 在 客户 端 中 没有 安装 时 ,使 用 这 个 字体 的 文字 就 不 能 正常 显示 。 在 CSS3 
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中 新 增 了 WebFont 功能 ,使 用 这 个 功能 后 ,网 页 可 以 使 用 安装 在 服务 器 端的 字体 ,只 要 服 
务 器 安装 了 这 种 字体 ,网 页 就 能 够 正常 显示 。 

在 网 页 上 显示 服务 器 端的 字体 ,可 以 使 用 @font-face 属性 来 设置 利用 服务 器 端的 字 
体 。@font-face 属性 的 使 用 方法 如 下 : 


@ font- face{ 
font- family : WebFont; 
src : url('font/Fontin Sans R 45b.otf ') format (" opentype" ); 
font— weight : normal; 

1 


在 例 9-12 中 展示 了 对 address 元 素 使 用 宋体 。 在 运行 该 示例 前 ,需要 下 载 这 种 字体 
文件 并 安装 在 服务 器 端 。 


<!-- 例 9-12--> 
< !DOCTYPE html> 
<html lang= "en"> 
<head> 
<meta charset= "UTF- 8"> 
<title> 在 网 页 上 显示 服务 器 端 文字 < /title> 
</head> 
<style type= "text/css"> 
@ font- face{ 
font- family: WebFont; 
src:url('Font Sans R 45b.otf') format ("opentype"); 


font- weight: normal; 


hlf 
font- family: WebFont; 
font- size: 60px; 
text- align: center; 
border: solid lpx #4488aa; 
margin:20px; 
Padding:5px7 
} 
address{ 
font- family: WebFont; 
font- size: 14px; 
font- style: normal; 
text- align: center; 
margin:20px; 
Padding: 5px; 
</style> 
<body> 
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<hl>@ font- face Style show< /hl> 

<address> 
此 页 面 用 于 链接 
<a href= "http://www.josbuivenga.demon.nl/fontinsans.html"> 

大 学 生 社 团 管理 系统 三 月 软件 

</a> 

</address> 

< /body> 
</htm> 


运行 效果 如 图 9-11 所 示 。 
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图 9-11 显示 服务 器 端的 字体 


4. font-size-adjust 属性 

如 果 改 变 了 字体 的 类 型 ,页面 中 使 用 该 字体 的 文字 大 小 也 有 可 能 发 生变 化 ,导致 已 经 
设 定好 的 页 面 布 局 混乱 。 使 用 font-size-adjust 属性 可 以 保持 文字 大 小 在 不 发 生变 化 的 情 
况 下 改变 字体 的 类 型 。 

(1) 字体 不 同 导致 文字 大 小 不 同 。 设 置 每 个 div 元 素 的 字体 为 15 个 像素 ,字体 样式 
不 一 致 , 则 页 面 上 展示 的 文字 大 小 也 不 一 致 ,如 例 9-13 所 示 。 


<!-- 例 9-13--> 
< IDOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset= "UTF- 8"> 
<title> 字 体 不 同 导致 文字 大 小 不 同 < /title> 
</head> 
<style type= "text/css"> 
#font show{ 
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font- family:" 宋 体 "; 
font- size:15px; 
} 
#font showl{ 
font- family:" 懂 体 "; 
font- size:15px; 
} 
#font show2{ 
font- family:Tahoma; 
font- size:15px; 
} 
</style> 
<body> 
<div id="font show"> 
This is Css! 
</div> 
<div id="font showl"> 
This is CSSs! 
</div> 
<div id="font show2"> 
This is CSS! 
</div> 
< /body> 
</html> 


运行 效果 如 图 9-12 所 示 。 
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图 9-12 字体 不 同 导致 大 小 不 同 效果 


(2) font-size-adjust 属性 的 使 用 方法 。font-size-adjust 属性 的 使 用 方法 很 简单 ,需要 
使 用 每 个 字体 种 类 自 带 的 一 个 aspect 值 (比例 值 )。font-size-adjust 属性 的 使 用 方法 如 下 
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所 示 ,其 中 0. 46 为 Times New Roman 字体 的 aspect 值 。 
div{ 
font- size: 16px; 
font- family: Times New Roman; 
font- size- adjust: 0.46; 


aspect 值 可 以 用 来 在 将 字体 修改 为 其 他 字体 时 保持 字体 大 小 的 基本 不 变 。 表 9-2 所 
示 为 一 些 常用 的 西方 字体 的 aspect 值 。 


表 9-2 常用 的 西方 字体 的 参照 值 




















字体 种 类 aspect 值 字体 种 类 aspect 值 
Verdana 0.58 Times News Roman 0.46 
Comic Sans MS 0.54 Gill Sans 0.46 
Trebuchet MS 0.53 Bernhard Modern 0.4 
Myriad Web 0.48 Fjemish Script 0.28 
Georgia 0.5 Caflish Script Web 0.37 














(3) 浏览 器 对 于 aspect 值 的 计算 方法 。font-size-adjust 属性 中 指定 aspect 值 并 将 字 
体 修改 为 其 他 字体 后 ,浏览 器 对 于 修改 后 的 字体 尺寸 的 计算 公式 如 下 。 


c= (a/b)s 


其 中 ,a 表示 实际 使 用 的 字体 的 aspect 值 ,b 表示 修改 前 字体 的 aspect 值 ,s 表示 指定 
的 字体 尺寸 ,c 为 浏览 器 实际 显示 时 的 字体 尺寸 。 
font-size-adjust 属性 的 使 用 如 例 9-14 所 示 。 


<!-- 例 9-14--> 
< IDOCTYPE html> 
<html lang= "en"> 
<head> 
<meta charset= "UTF- 8"> 
<title> 字 体 不 同 导致 文字 大 小 不 同 < /title> 
</head> 
<style type= "text/css"> 
#font show{ 
font- family:" 宋 体 "; 
font- size:25px; 
E 
#font showl{ 
font- family:" 楷 体 "; 
font- size:25px; 
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#font show2{ 
font- family:Tahoma; 
font- size:25px; 
E 
</style> 
<body> 
<div id="font show"> 
This is Css! 
</div> 
<div id="font showl"> 
This is CSSs! 
</div> 
<div id="font show2"> 
This is CSS! 
</div> 
< /body> 
</html> 


运行 效果 如 图 9-13 所 示 。 
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图 9-13 ”字体 不 同 导致 文字 大 小 不 同 效果 展示 


5.text-outline 和 text-stroke 属性 

文本 模块 提供 了 一 种 更 好 的 控制 轮廓 方式 , 即 text-outline 属性 。 这 个 属性 可 以 为 如 
下 至 个 佳 ， 

#T of 

text- outline: width blur- radius color; 

} 
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下 面 的 代码 使 用 蓝 色 为 文本 提供 了 4px 的 模糊 半径 : 


hi{ 
text- outline: 2px 4px blue; 


text-stroke 共有 四 个 属性 值 : 两 个 控制 描 边 本 身 的 外 观 ,一 个 是 前 面 两 个 简写 的 属 
性 ,还 有 一 个 是 控制 描 边 文本 的 填充 属性 。 这 几 个 属性 的 语法 如 下 所 示 。 


#T_o{ 

一 webkit-text- fil1- color: color; 

一 webkit-text- stroke- color: color; 

-webkit- text- stroke- width: length; 

一 Webkit- text- stroke: stroke- width stroke- color; 
} 


text-fill-color 属性 看 起 来 有 点 多 余 。 但 如 果 不 指定 它 , 描 边 的 元 素 将 使 用 color 的 
指定 值 。text-stroke 是 text-stroke-width 和 text-stroke-color 的 简写 属性 。 
例 9-15 是 text-stroke 语法 的 演示 例子 。 


<1-- 例 9-15--> 
< !DOCTYPE html> 
<html lang= "en"> 
<head> 
<meta charset= "UTF- 8"> 
<title> 让 文本 变 得 更 清晰 < /title> 
</head> 
< style type= "text/css"> 
hil{ 
color:#555; 
一 webkit- text- fil1- color:white; 
一 webkit- text- stroke- color:# 5557 
一 Webkit-text- stroke- width:3px7 
</style> 
<body> 
<hl> text- stroke< /hl> 
< /body> 
</html> 


运行 效果 如 图 9-14 所 示 。 
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图 9-14 没有 应 用 text-stroke 属性 的 文本 (上 ) 与 应 用 了 的 文本 (下 ) 


9.5 背景 和 颜色 的 使 用 


CSS3 对 背景 设置 做 了 一 些 修改 ,最 明显 的 一 个 就 是 可 以 设置 多 背景 ,不 但 添加 了 4 
个 新 属性 ,并且 还 对 目前 的 属性 进行 了 调整 增强 。CSS3 包含 多 个 新 的 背景 属性 ,提供 了 
对 背景 更 强大 的 控制 。 在 本 节 中 将 学 到 如 何 使 用 多 重 背景 图 片 。 


95.1 设置 颜色 的 方法 


1. 认识 CSS 颜色 

常用 颜色 地 方 包含 字体 颜色 、 超 链接 颜色 、 网 页 背景 颜色 、 边 框 颜色 。 颜 色 规范 与 颜 
色 规 定 , 网 页 使 用 RGB 模式 颜色 。 

2. 颜色 基础 知识 

网 页 中 颜色 的 运用 是 网 页 必 不 可 少 的 一 个 元 素 。 使 用 颜色 目的 在 于 有 区 别 、 有 动感 
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(特别 是 超 链接 中 和 运用) 美观 ,同时 颜色 也 是 网 页 样式 表现 元 素 之 一 。 
CSS 颜色 语法 如 下 : 


color:#000000; 


CSS 样式 的 color 后 直接 加 RGB 颜色 值 (#FFFFFF、#000000、#F00)。RGB 颜色 
值 在 实际 布局 时 确定 ,也 可 以 使 用 Photoshop( 简 称 PS) 拾 取 工 具 进 行 获取 。 

有 如 下 两 种 方法 设置 对 象 颜色 样式 : 

(1) 在 DIV 标签 内 使 用 color 颜色 样式 : 


<div style= "color:#F00"> www.]jb51.net< /div> 
(2) 在 CSS 选择 器 中 使 用 color 颜色 样式 CSS 代码 : 


"divcss5{color:# 00F} 
/* 设置 对 象 divcss5 内 文字 为 蓝 色 * / 


3. 文字 颜色 控制 一 样 

传统 HTML 和 CSS 文字 颜色 相同 使 用 *color: ”十 “RGB 颜色 取 值 ? 即 可 ,如 颜色 为 
黑色 字 , 则 对 应 设置 CSS 属性 选择 器 内 添加 “color: #000;” 即 可 。 

4. 网 页 背景 颜色 设置 区 别 

传统 设置 背景 颜色 使 用 "bgcolor 王 颜色 取 值 ,而 CSS 中 则 用 “background: "十 颜色 
取 值 。 例 如 ,设置 背景 为 黑色 ,传统 HTML 设置 ,在 标签 内 加 入 “bgcolor 二 "#000"” 即 可 
实现 颜色 为 黑色 背景 ,如 果 在 W3C 中 , 则 在 对 应 CSS 选择 器 中 设置 "background: 
并 000” 来 实现 。 

5. 设置 边框 颜色 区 别 

传统 HTML 中 使 用 *bordercolor 王 取 值 ,CSS 中 使 用 *bordercolor: "十 颜色 取 值 。 例 
如 ,在 传统 HTML 中 直接 在 table 标签 加 入 “bordercolor 王 "并 000"” 即 可 ,在 CSS 中 ,设置 
“border-color: #000;” 即 可 让 边框 颜色 为 黑色 ,同时 记得 设置 宽度 和 样式 (虚线 、 实 现 ) 。 

6. 设置 RGB 颜色 的 四 种 方法 

(1) #rrggbb( 如 #00cc00) (强烈 推荐 使 用 此 表示 颜色 取 值 ) 。 

(2) #rgb( 如 #0c0) 。 

(3) RGB(x,x,x) ,其 中 x 是 一 个 包容 性 的 0 和 255 之 间 的 整数 (如 RGB(0,204,0)) 。 

(4) RGB(y%,y%,y%), 其 中 y 是 一 个 包容 性 的 数量 介 于 0.0 和 100. 0 之 间 ( 如 
RGB(0% ,80% ,0%)), 

7. 获得 CSS 颜色 值 

当 记 不 住 颜 色 值 时 ,如 何 获取 与 图 片 中 某 部 分 相同 的 颜色 值 呢 ?通常 是 在 PS 软件 
里 通过 识 色 器 工具 获得 准确 颜色 值 , 也 可 以 借用 其 他 专门 识别 颜色 工具 获取 准确 的 color 
颜色 值 。 当 然 一 般 的 网 页 开发 软件 都 有 颜色 取 值 器 。 

8. CSS 颜色 样式 总 结 

要 使 用 CSS 样式 设置 对 象 内 容颜 色 样式 ,可 以 使 用 命名 CSS 类 对 象 类 设置 ,还 有 直 
接 在 HTML 标签 内 设置 。 
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952 设置 背景 颜色 

background-color 属性 用 于 设 定 网 页 的 背景 颜色 ,能 接受 任何 有 效 的 颜色 值 ,对 于 没 
有 设 定 的 背景 色 ,默认 为 透明 (transparent) 。background-color 属性 的 语法 格式 为 : 

{ background- color: transparent | color } 


transparent 是 个 默认 值 ,表示 透明 。 背 景 颜色 color 设 定 的 方法 可 以 采用 英文 单词 、 
十 六 进 制 .RGB 、HSL .HSLA 和 RGBA。 其 中 ,RGBA、HSL 和 HSLA 是 CSS3 新 增加 的 
三 种 颜色 值 。 

RGBA 即 在 CSS2 版 本 中 增加 的 支持 透明 度 的 元 素 。 这 里 的 透明 度 , 取 值 范围 为 0 一 1 。 

RGBA(255,0,0,0.5), 

HSL 语法 如 下 : 


hsl (207, 38% , 47% ) 


HSL 属性 值 如 表 9-3 所 示 。 














表 9-3 HSL 属性 值 
属性 值 省 略 属 性 值 
H: Hue( 色 调 ) 取 值 为 : 0 一 360 ,其 实 它 的 单位 是 度 
S: Saturation( 饱 和 度 ) 取 值 为 : 0.0%~100.0% 
L: Lightness( 亮 度 ) 取 值 为 : 0.0 吧 一 100.0 色 
: no-clip: 默认 属性 值 ,类 似 于 background-clip: border 





二 注意 ; 0( 或 360) 表 示 红色 ,120 表示 绿色 ,240 表示 蓝 色 , 也 可 取 其 他 数值 来 指定 
颜色 。 


HSLA 也 是 在 HSL 的 基础 上 增加 的 支持 透明 度 的 元 素 。 这 里 的 透明 度 , 取 值 范围 
是 0 一 1。 语 法 如 下 。 


hsl (207, 38% , 47% , 0.5) 


可 以 通过 对 HSL 颜色 设 定 alpha 通道 的 方法 来 定义 HSLA 颜色 。HSLA 颜色 是 利 
用 色调 (H)、 饱 和 度 (S) 亮度 (L) 和 alpha 通道 值 (A) 来 定义 的 。 例 9-16 是 一 个 HSL 颜 
色 与 HSLA 颜色 的 使 用 示例 ,其 中 HSLA 中 的 alpha 通道 值 为 50%(0. 5) ,表示 半 透 明 。 


<!-- 例 9-16--> 
< !DOCTYPE html> 
<html lang="en"> 
<head> 
<meta http- equiv= "Content- Type™" content="text/html; charset=—utf- 8" /> 
<title> 使 用 HSL 设 置 颜色 < /title> 
</head> 
<style type= "text/css"> 


// 使 用 HSIR 


div.hslaLl { background:hsla(165, 35%, 50%, 0.2); height:20px; 
div.hslaL2 { background:hsla (165, 35%, 50%, 0.4); height:20px; 
div.hslaL3 { background:hsla (165, 35%, 50%, 0.6); height:20px; 
div.hslaL4 { background:hsla(165, 35%, 50%, 0.8); height:20px; 
div.hslL1 { background:hsl (320, 100%, 50%); height:20px; } 
div.hslL2 { background:hsl (320, 50%, 50%); height:20px; } 
div.hslL3 { background:hsl (320, 100%, 75%); height:20px; } 
div.hslL4 { background:hsl (202, 100%, 50%); height:20px; } 


</style> 
<body> 


<p> 这 是 HSLA 示 例 < /p> 

<div class= "hslaLl">< /div> 
<div class= "hslaL2">< /div> 
<div class= "hslaL3">< /div> 
<div class= "hslaL4">< /div> 
<br> 

<p> 这 是 HSL 示 例 < /p> 

<div class= "hslL1">< /div> 
<div class= "hslL2">< /div> 






<div class= "hslL3">< /div> 
<div class="hslL4">< /div> 
< /body> 
</head> 
<html> 


运行 效果 如 图 9-15 所 示 。 


953 设置 





|/D 全 用 HSsHi& 百 大 色 x\ 


第 9 章 ”05563 基础 


} 
} 


// 使 用 HSL 
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这 是 HSLA 示 例 


这 是 HSL 示 例 





图 9-15 HSL 和 HSLA 的 使 用 效果 


背景 图 片 


CSS 中 通过 background-image 属性 来 设置 背景 图 片 。 为 窗 体 设 置 一 个 背景 图 片 的 
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格式 如 下 。 


body { 


background- image: url (picture.jpg) 


表 9-4 background-image 属性 值 及 其 含义 

















属 性 值 含 义 

url(URL) 指向 图 像 的 路 径 

None 默认 值 。 不 显示 背景 图 像 

Inherit 规定 应 该 从 父 元 素 继承 background-image 属性 的 设置 





CSS3 设置 背景 图 片 添加 了 4 个 新 的 属性 ,分 别 是 background-clip、background- 
origin,background-size 和 background-break。 
(1) background-clip 能 够 控制 背景 显示 的 位 置 ,其 属性 值 如 表 9-5 所 示 。 


表 9-5 ”background-clip 属性 值 及 其 含义 

















属 性 值 含 党 

: border 背景 在 border 边框 下 开始 显示 

: padding 背景 在 padding 下 开始 显示 

: content 背景 在 内 容 区 域 下 开始 显示 

: no-clip 默认 属性 值 ,类 似 于 background-clip: border 


(2) background-origin 属性 需要 与 background-position 配合 使 用 。 可 以 用 
background-position 计算 定位 是 从 border、 padding 或 content 内 容 区 域 算 起 (类 似 
background-clip) ,其 属性 值 如 表 9-6 所 示 。 


表 9-6 ”background-origin 属性 值 及 其 含义 

















属 性 值 含 义 
: border 从 border 边框 位 置 算 起 

: padding 从 padding 位 置 算 起 

: content 从 content-box 内 容 区 域 位 置 算 起 





(3) background-size 属性 用 来 重 设 背景 图 片 ,其 属性 值 如 表 9-7 所 示 。 


表 9-7 background-size 属性 值 及 其 含义 





属 性 值 


售 “ 广 





: contain 


缩小 背景 图 片 使 其 适应 标签 元 素 (主要 是 像素 方面 的 比率 ) 





: COVeT 


让 背景 图 片 放大 延伸 到 整个 标签 元 素 大 小 (主要 是 像素 方面 的 比率 ) 





: bounding-box 


重新 考虑 区 域 之 间 的 间隔 





: each-box 


对 每 一 个 独立 的 标签 区 域 进行 背景 的 重新 划分 





: 100px 100px 





标明 背景 图 片 缩放 的 尺寸 大 小 
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9.6 ”设置 超 链 接 样 式 


超 链接 有 四 种 不 同 的 状态 ,CSS 用 伪 类 来 标识 它们 。 文 字 超 链接 默认 的 样式 有 下 面 线 ， 
文字 在 未 访问 时 、 访 问 时 与 访问 过 后 有 不 同 的 颜色 。 图 像 超 链接 默认 的 样式 有 边框 ,边框 的 
颜色 在 未 访问 时 、 访 问 时 与 访问 过 后 都 不 同 。 可 以 利用 CSS 更 改 超 链接 的 样式 。 

表 9-8 显示 了 超 链 接 的 四 种 访问 状态 。 


表 9-8 超 链 接 的 四 种 状态 及 其 含义 

















访问 状态 含 义 

: link 设置 a 对 象 在 未 被 访问 前 的 样式 表 属 性 

: visited 设置 a 对象 在 其 链接 地 址 已 被 访问 过 时 的 样式 表 属 性 

: hover 设置 对 象 在 其 鼠标 悬 停 时 的 样式 表 属 性 

: active 设置 对 象 在 被 用 户 激活 (在 鼠标 单 击 与 释放 之 间 发 生 的 事件 ) 时 的 样式 表 属性 





定义 超 链 接 样式 的 一 般 格式 如 下 。 
选择 符 : 伪 类 名 { 样式 表 } 


伪 类 名 字 对 大 小 写 不 敏感 ,但 在 定义 顺序 上 有 要 求 ,: hover 必须 被 置 于 : link 和 
: visited 之 后 才 是 有 效 的 ,: active 必须 被 置 于 : hover 之 后 才 是 有 效 的。 如 果 没 有 指定 
伪 类 , 则 默认 为 : link。 超 链接 默认 情况 下 是 总 是 有 下 面 线 的 ,如 果 要 去 掉 下 面 线 , 则 需 
要 添加 样式 text-decoration: none。 

例 9-17 实现 了 超 链接 样式 的 设置 。 


<!-- 例 9-17--> 
< !DOCTYPE html> 
<html lang= "en"> 
<head> 
<meta charset= "UTF- 8"> 
<title> 设 置 超 链接 样式 < /title> 
< /head> 
<style type= "text/css"> 
/* // 链 接 平常 样式 * / 
a:link { 
font- size: 10pt; 
color: #0000cc; 
font- family: "宋体 "; 
text-align: left; 
text- decoration: underline; 
TEXT- DECORATION:none; 
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/* 链接 访问 后 样式 * / 
a:visited { 
font- size: 9pt; 
color: #0000cc; 
font- family: 宋体 ; 
text-align: left; 
text- decoration: underline; 
TEXT- DECORATION:none; 
} 
/* 鼠标 放 到 链接 上 样式 * / 
a:hover { 
color: #993300; 
text- decoration: underline; 
TEXT- DECORATION:none; 
/* 链接 被 按 下 时 样式 * / 
a:active { 
color: #££0033; 
text- decoration: none; 
} 
</style> 
<body> 
<a href="www.baidu.com"> 百 度 一 下 ,您 就 知道 < /a> 
< /body> 
</html> 


运行 效果 如 图 9-16 所 示 。 





/RE 
所 | B filey//D;/code/CSS3/index |.html 交通 US 
百度 一 下 ， 您 就 知道 (访问 前 》 
百度 一 下 ， 您 就 知道 (访问 时 》 
百度 一 下 ， 您 就 知道 (访问 后 》 

















图 9-16 设置 超 链 接 样式 
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9.7 盒子 概念 与 使 用 


盒子 模型 的 定义 里 ,每 个 显示 在 网 页 上 的 标签 都 是 一 个 矩形 对 象 。 盒 子 模 型 中 的 
矩形 对 象 都 包含 了 一 个 内 容 区 域 , 这 个 内 容 区 域 能 够 容纳 其 他 和 矩形 对 象 , 盒 子 模型 通过 这 
样 一 层 套 一 层 的 方式 ,将 树 状 结构 的 标签 展开 成 为 树 状 结构 的 矩形 对 象 ,来 决定 矩形 对 象 
之 间 互 相 影 响 的 显示 外 观 。 


97.1 盒子 的 概念 


盒子 模型 里 的 矩形 对 象 包含 了 如 图 9-17 所 示 的 各 种 各 样 的 样式 ,这 些 代表 标签 的 矩 
形 对 象 的 显示 样式 ,开发 者 可 以 通过 CSS 样式 来 更 改 。 图 中 矩形 对 象 的 几 个 显示 样式 ， 
依照 由 外 向 内 的 顺序 分 别 对 外 边界 ,边框 和 内 边界 进行 详细 说 明 。 
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图 9-17 盒子 模型 说 明 


(1) 外 边界 : 首先 看 到 的 是 margin 属性 (外 边 距 )。 外 边界 定义 了 矩形 对 象 与 其 他 矩 
形 对 象 之 间 的 距离 。 浏 览 器 在 决定 显示 外 观 的 时 候 , 会 参考 这 个 显示 样式 所 定义 的 距离 ， 
来 计算 对 象 与 内 容 区 域 之 间 的 距离 .同一 个 内 容 区 域内 相 邻 的 两 个 矩形 之 间 的 距离 。 

(2) 边框 : border 属性 (边框 ) 定 义 了 和 矩形 对 象 显示 在 网 页 时 边框 的 框 线 样式 与 粗 
细 。 浏 览 器 在 决定 显示 外 观 时 候 , 会 参考 这 个 样式 所 定义 的 框 线 粗细 来 计算 矩形 对 象 的 
面积 大 小 。 并 且 在 显示 标签 的 时 候 ,依照 这 个 样式 来 显示 边框 的 框 线 样式 与 粗细 。 

(3) 内 边 距 : padding 属性 (内 边 距 ) 定 义 了 和 矩形 对 象 的 边框 与 内 容 区 域 之 间 的 距离 
浏览 器 参考 这 个 样式 所 定义 的 距离 来 计算 边框 与 内 容 区 域 之 间 应 该 要 保持 的 距离 。 

(4) 宽度 高度 : width 属性 (宽度 ) ,height 属性 (高 度 ) 用 来 定义 内 容 区 域 面积 的 大 小 。 


972 设置 元 素 外 边界 
margin 属性 表示 盒子 模型 的 外 边界 概念 。 盒 子 模型 中 的 矩形 对 象 都 包含 了 一 个 内 容 
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区 域 , 这 个 内 容 区 域 能 够 容纳 其 他 的 矩形 对 象 。 和 矩形 对 象 与 内 容 区 域 之 间 的 距离 .同一 内 容 
区 域内 相 邻 的 两 个 矩形 对 象 之 间 的 距离 ,都 是 参考 margin 属性 进行 计算 。 
例 9-18 示范 了 如 何在 网 页 中 使 用 margin 属性 。 


<!-- 例 9-18--> 
< !DOCTYPE html> 
<html lang= "en"> 
<head> 
<meta charset= "UTF- 8"> 
<title> 使 用 class 选择 器 < /title> 
</head> 
<style type= "text/css"> 
#margin show{ 
background- color:#£f£000; 
width:100px; 
height:100px; 
margin:50px; 
多 
#margin showl{ 
background- color:#£f£000; 


width:100px; 

height:100px; 

margin- top:10px; /* 设 置 居 顶部 10px * / 
margin- left:50px; /* 设 置 居 左 50px * / 


} 
#margin show2{ 
background- color:#£f£000; 


width:100px; 

height:100px; 

margin- bottom:10px; /* 设 置 居 底 部 10px * / 
margin- right :50px; /* 设置 居 右 50px */ 


} 

#margin show3{ 
background- color:red; 
width:30px; 
height :30px; 
margin:0 auto; /x 设置 居中 x*/ 

} 

</style> 
<body> 

<div id="margin show"> 
This is Css! 

</div> 

<div id= "margin showl"> 
This is Css! 

</div> 


<div id= "margin show2"> 
<div id= "margin show3"> 
</div> 
</div> 
< /body> 
</htm> 


运行 效果 如 图 9-18 所 示 。 
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图 9-18 margin 属性 的 使 用 
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border 属性 表示 盒子 模型 的 边框 概念 。 可 以 定义 边框 的 框 线 样式 与 框 线 粗细 。 开 
发 人 员 通 过 border 属性 ,定义 代表 标签 的 矩形 对 象 的 边框 。 边 框 样式 是 以 文字 字符 串 来 
定义 边框 样式 的 属性 内 容 。 

例 9-19 示范 了 在 网 页 中 使 用 border 属性 。 通 过 CSS 将 两 个 div 标签 的 设置 为 边框 
粗细 不 同 、 面 积 相同 。 


<!-- 例 9-19--> 
< !IDOCTYPE html> 
<html lang= "en"> 
<head> 
<meta charset= "UTF- 8"> 
<title> 使 用 class 选择 器 < /title> 
</head> 
<style type= "text/css"> 
#border show{ 
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background- color:# ££0099; 
width:100px; 
height:100px; 
border:5px solid blue; 
. 
#border showl{ 
background- color:# ££f0099; 
width:100px; 
height:100px; 
margin- top: Spx; 
border:15px solid blue; 
} 
</style> 
<body> 
<div id= "border show"> 
This is CSS! 
</div> 
<div id= "border showl"> 
This is Css! 
</div> 
< /body> 
</html> 


运行 效果 如 图 9-19 所 示 。 
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图 9-19 边框 的 使 用 


border-style 属性 用 于 设置 元 素 所 有 边框 的 样式 ,或 者 单独 为 各 边 设置 边框 样式 。 


border- style:dotted solid double dashed;”// 设 置 上 下 左右 边框 的 样式 
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border-style 属性 值 如 表 9-9 所 示 。 
表 9-9 ”border-style 属性 值 及 其 含义 









































访问 状态 含 二 

none 定义 无 边框 

hidden 与 "none" 相 同 。 不 过 应 用 于 表 时 除外 ,对 于 表 ,hidden 用 于 解决 边框 冲突 
dotted 定义 点 状 边 框 。 在 大 多 数 浏览 器 中 呈现 为 实 线 
dashed 定义 虚线 。 在 大 多 数 浏览 器 中 呈现 为 实 线 

solid 定义 实 线 

double 定义 双 线 。 双 线 的 宽度 等 于 border-width 的 值 

groove 定义 3D 凹 槽 边框 。 其 效果 取决 于 border-color 的 值 
ridge 定义 3D 垄 状 边框 。 其 效果 取决 于 border-color 的 值 
inset 定义 3D inset 边框 。 其 效果 取决 于 border-color 的 值 
outset 定义 3D outset 边框 。 其 效果 取决 于 border-color 的 值 
inherit 规定 应 该 从 父 元 素 继承 边框 样式 


974 设置 元 素 内 边界 


padding 属性 表示 盒子 模型 的 内 边 距 。 通 过 padding 属性 定义 代表 标签 的 矩形 对 象 
的 内 边 距 。 能 够 接受 长 度 、 百 分 比 等 属性 值 。 其 中 ,百分比 属性 值 和 margin 属性 一 样 的 ， 
都 是 使 用 父 矩 形 对 象 的 内 容 区 域 大 小 来 作为 百分比 的 计算 基数 ,如 例 9-20 所 示 。 


<I-- 生 9-20--> 
< !DOCTYPE html> 
<html lang= "en"> 
<head> 
<meta charset= "UTF- 8"> 
<title> 使 用 class 选择 器 < /title> 
</head> 
<style type= "text/css"> 
#padding show{ 
background- color:# fff000; 
width:100px; 
height:100px; 
padding:10px; 
' 
#padding showl{ 
background- color:# £ff000; 
width:100px; 
height:100px; 
margin:10px; 
padding:40px; 
1 
</style> 


<body> 
<div id= "padding show"> 
This is CSS! 
</div> 
<div id= "padding showl"> 
This is Css! 
</div> 
< /body> 
</html> 


运行 效果 如 图 9-20 所 示 。 
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图 9-20 ”内 边界 的 设 定 效果 


全 提示 : padding 是 内 容 与 边框 的 空隙 ,而 margin 是 模块 与 模块 的 空隙 。 


9.8 列 表 


列表 在 网 页 制作 当中 十 分 普遍 ,如 新 闻 列表 、 产 品类 别 列表 等 ,甚至 导航 栏 ,都 用 到 了 
列表 (HTML 标签 为 <1i>), 所 以 ,列表 样式 也 自然 显得 格外 重要 ,定义 不 同 的 列表 样式 ， 
会 得 到 不 同 的 列表 效果 。 下 面 介 绍 三 个 常见 的 列表 属性 值 及 其 含义 ,如 表 9-10 所 示 。 


表 9-10 常见 的 列表 属性 值 及 其 含义 














常见 的 列表 属性 值 含 义 
list-style-type 设 定 引 导 列 表 项 目的 符号 类 型 
list-style-image 选择 图 像 作为 项 目的 引导 符号 
List-style-position 决定 列表 项 目 所 缩 进 的 








定义 列表 项 目 符号 类 型 的 语法 形式 如 下 : 
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list- style- type:value 
常见 的 列表 符号 类 型 的 属性 值 及 其 含义 如 表 9-11 所 示 。 
表 9-11 常见 的 列表 符号 属性 值 及 其 含义 
































常见 的 列表 符号 属性 什 含义 
a 设 定 引导 列表 项 目的 符号 类 型 
a 选择 图 像 作为 项 目的 引导 符号 
eatinil 在 文本 前 面 加 普通 的 阿拉 伯 数 字 
i 在 文本 前 面 加 小 写 罗马 数字 
DR 在 文本 前 面 加 大 写 罗马 数字 
me 在 文本 前 面 加 小 写 英文 字母 
bp 在 文本 前 面 加 大 写 英文 字母 
访 十 不 显示 任何 项 目 符号 或 编号 
二 在 文本 前 面 加 实心 贺 





9.9 上 机 练习 


下 面 利用 有 序列 表 来 实现 一 个 漂亮 的 列表 样式 ,如 例 9-21 所 示 。 


<!-- 例 9-21--> 
< IDOCTYPE html> 


<html> 
<head> 
<title> 设 置 列表 样式 示例 < /title> 
<style> 
body{ 
margin: 40px auto; 
width: 500px; 
i 
PE x*/ 
olf 


counter- reset: 1i; 

list- style: none; 

x* list- style: decimal; 

font: 15px "trebuchet MS', 'lucida sans'; 

padding: 0; 

margin— bottom: 4em; 

text- shadow: 0 lpx 0 rgba (255,255,255, .5); 
条 
ol olf 
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margin: 0 0 0 2em; 


.rounded- list af 
position: relative; 
display: block; 
padding: .4em .4em .4em 2em; 
* padding: .4em; 
margin: .5em 0; 
background: #ddd; 
color: #444; 
text- decoration: none; 
-moz- border- radius: .3em; 
—webkit- border- radius: .3em; 
border- radius: .3em; 
—webkit- transition: all .3s ease- out; 
-moz- transition: all .3s ease- out; 
-ms- transition: all .3s ease- out; 
-or-transition: all .3s ease- out; 
transition: all .3s ease- out; 
4 
.ITounded- list a:hover{ 
background: #eee; 
} 
.rounded- list a:hover:before{ 
-moz- transform: rotate(360deg); 
—webkit- transform: rotate (360deg); 
—moz- transform: rotate(360deg); 
-ms- transform: rotate (360deg); 
-0o- transform: rotate (360deg); 
transform: rotate (360deg); 
} 
.rounded- list a:before{ 
content: counter (1i); 
counter- increment: 1i; 
position: absolute; 
left: -1.3em; 
top: 50%; 
margin- top: -1.3em; 
background: #87ceeb; 
height: 2em; 
width: 2em; 
line- height: 2em; 
border: .3em solid #fff; 
text- align: center; 
font- weight: bold; 
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一 moz-border- radius: 2em; 
—webkit— border- radius: 2em; 
border- radius: 2em; 
一 Webkit-transition: all .3s ease— out; 
—moz- transition: all .3s ease- out; 
-ms- transition: all .3s ease- out; 
-0o-transition: all .3s ease- out; 
transition: all .3s ease- out; 
} 
</style> 
</head> 
<body> 
<ol class="rounded- list"> 
<li><ahref="">List item< /a></li> 
<li><ahref="">List item< /a></li> 
<ol> 
<1li><a href="">List sub item< /a></li> 
<1li><a href="">List sub item< /a></li> 
</ol> 
A 
<li><ahref="">List item< /a></li> 
<li><ahref="">List item< /a></li> 
</ol> 
< /body> 
</html> 


运行 效果 如 图 9-21 所 示 。 











图 9-21 漂亮 的 列表 样式 
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9.10 本 章 小 结 


本 章 主 要 讲解 了 CSS 的 基本 使 用 。 重 点 内 容 如 下 : 

(1) 选择 器 大 体 分 为 两 种 类 别 。 第 一 种 类 别 包 含 了 类 型 选择 器 、 类 选择 器 、 选 择 元 素 
的 一 部 分 和 ID 选择 器 ,统称 为 DOM 选择 器 ;第 二 种 类 别 包含 伪 选择 器 。 

(2) 样式 表 的 定义 及 使 用 。 

(3) 排版 样式 的 使 用 以 及 颜色 的 设置 。 

(4) 盒子 模型 的 使 用 。 


CSS3 高 级 应 用 


CSS3 为 网 页 带 来 了 许多 的 新 特性 ,CSS3 高 级 应 用 更 是 带 来 了 充满 想象 的 视觉 效 
果 : 2D、3D 动画 ,渐变 以 及 过 渡 效 果 。 

本 章 重点 

。 掌握 块 级 元 素 的 设置 

。 了 解 动画 设计 的 规则 

。 掌握 基本 的 动画 设计 基础 

。 熟练 掌握 页 面 的 基本 布局 以 及 弹性 例 布 局 的 使 用 


10.1 div 元 素 


HTML 所 div 过 元素 是 块 级 元 素 , 它 是 用 于 组 合 其 他 HTML 元 素 的 容器 。 二 div 二 
元 素 在 网 页 中 的 作用 是 定位 元 素 或 者 布局 ,运用 一 div 过 元素 比 表格 的 布局 更 具有 灵活 
性 , 它 能 够 将 层 中 的 内 容 摆 放 到 浏览 器 的 任意 位 置 ,同时 还 可 以 嵌入 应 用 。<div 二 元 素 
没有 特定 的 含义 ,由 于 它 属于 块 级 元 素 , 浏 览 器 会 在 其 前 后 显示 换行 。 如 果 与 CSS 一 同 
使 用 ,过 div 之 元素 的 常见 用 途 包 括 文档 布局 文字、 图 像 动画。 一 个 网 页 文件 中 可 以 使 
用 多 个 层 , 层 与 层 之 间 可 以 以 任意 方式 重 肆 。 所 div 过 的 基本 语法 如 下 : 
<body> 
<div id=- "divl"> 你 好 ,这 是 一 个 divl 元 素 。< /div> 
<div id- "div2"> 你 好 ,这 是 一 个 div2 元 素 。</div> 
</body> 
所 div 过 元素 的 应 用 如 例 10-1 所 示 。 


<!-- 例 10-1--> 

< !DOCTYPE html> 

<html lang= "en"> 

<head> 
<meta charset="UTF- 8"> 
<title> 块 级 元 素 示例 < /title> 
<style type= "text/css"> 
#1ayerl{ 
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Position:absolutey 
width:121pxy 
height:115pxzz- index:1; 
left:47px;top:131px; 
background- color:# 00FFO0; 
border:1px none # 000000; 
visibility:inherit; 

} 

#1ayer2{ 
position:absolute; 
left:241lpx;top:20px; 
width:145px; 
height :52px; 

} 

</style> 

</head> 

<body > 
<div id="layerl"> 
</div> 
<div id="layer2"> 
< img src= "Images/123.jpg" width= "230px" height="300px" alt=" 未 显示 "> 
</div> 

< /body> 

</htm> 


运行 效果 如 图 10-1 所 示 。 





了 D 块 级 元 素 示例 x 


© [ file///D:/code/CSS3/index .html 
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图 10-1 块 级 元 素 设置 


第 10 章 “Cs 高 级 应 用 


在 例 10-1 的 代码 中 使 用 了 一 些 基本 属性 ,下 面 对 这 些 属性 进行 详细 介绍 。 
1. position 属性 规定 元 素 的 定位 类 型 
该 属性 定义 建立 元 素 布 局 所 用 的 定位 机 制 。 任 何 元 素 都 可 以 定位 ,不 过 绝对 定位 或 
固定 定位 元 素 会 生成 一 个 块 级 框 ,而 不 论 该 元 素 本 身 是 什么 类 型 。 相 对 定位 元 素 会 相对 
于 它 在 正常 流 中 的 默认 位 置 偏 移 。position 属性 值 及 其 含义 如 表 10-1 所 示 。 
表 10-1 ”position 属性 值 及 其 含义 























属 性 值 含 义 
absolute 生成 绝对 定位 的 元 素 , 相 对 于 static 定位 以 外 的 第 一 个 父 元 素 进行 定位 
fixed 生成 绝对 定位 的 元 素 , 相 对 于 浏览 器 窗口 进行 定位 
relative 生成 相对 定位 的 元 素 , 相 对 于 其 正常 位 置 进 行 定 位 
static 默认 值 。 没 有 定位 ,元 素 出 现在 正常 的 流 中 
inherit 规定 应 该 从 父 元 素 继承 position 属性 的 值 


侠 提 示 : position 中 元 素 的 位 置 通过 left top ,right 以 及 bottom 属性 进行 规定 , 默 
认 值 static 忽略 top .bottom \left right 或 z-index 声明 。 
2. visibility 属性 规定 元 素 是 否 可 见 
visibility 属性 值 及 其 含义 如 表 10-2 所 示 。 
表 10-2 visibility 属性 值 及 其 含义 

















属 性 值 含 义 
visible 默认 值 ,元 素 是 可 见 的 
hidden 元 素 是 不 可 见 的 
collapse 当 在 表格 元 素 中 使 用 时 ,此 值 可 删除 一 行 或 一 列 ,但 是 它 不 会 影响 表格 的 布局 
inherit 规定 应 该 从 父 元 素 继承 visibility 属性 的 值 





3. z-index 属性 设置 元 素 的 堆 到 顺序 
拥有 更 高 堆 生 顺序 的 元 素 总 是 会 处 于 堆 释 顺序 较 低 的 元 素 的 前 面 。z-index 属性 值 
及 其 含义 如 表 10-3 所 示 。 


表 10-3 z-index 属性 值 及 其 含义 




















属 性 值 含 名 
absolute 生成 绝对 定位 的 元 素 , 相 对 于 static 定位 以 外 的 第 一 个 父 元 素 进行 定位 
fixed 生成 绝对 定位 的 元 素 ,相对 于 浏览 器 窗口 进行 定位 
relative 生成 相对 定位 的 元 素 , 相 对 于 其 正常 位 置 进行 定位 
static 默认 值 。 没 有 定位 ,元 素 出 现在 正常 的 流 中 
inherit 规定 应 该 从 父 元 素 继承 position 属性 的 值 








侠 提 示 : 元 未 可 拥有 负 的 zindex 属性 值 。 
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导航 栏 是 指 
着 链接 各 个 网 页 
区 域 。 

网 页 设计 导 


10.2 导航 栏 设计 


位 于 页 眉 区 域 , 在 页 眉 横 幅 图 片上 边 或 者 下 边 的 一 排水 平 导航 按钮 , 它 起 
的 作用 。 网 站 使 用 导航 栏 是 为 了 让 访问 者 更 清晰 快速 地 找到 需要 的 资源 


航 栏 需 要 借助 HTML 列表 来 实现 。HTML 列表 分 为 无 序列 表 和 有 序列 
表 , 还 可 以 使 用 自 定义 列表 。 拥 有 易 用 的 导航 条 对 于 任何 网 站 都 很 重要 ,通过 CSS 能 够 


把 乏味 的 HTML 菜单 转换 为 漂亮 的 导航 栏 。 


例 10-2 实现 一 个 网 站 首页 的 导航 栏 , 其 中 运用 了 导航 栏 的 基础 知识 。 


<!-- 例 10-2: 


-> 


< !DOCTYPE html> 


<html lang=" 
<head> 


"en"> 


<meta charset= "UTF- 8"> 

<title>Css 导航 菜单 设计 < /title> 

< style type= "text/css"> 

* {margin:O0px;padding:O0px;font- size:12px;} 
#nav li{float:left; list- style:none;} 


#nav li af 


i 


color:# 000;text- decoration:none;display:block; 
width:100px;height :25px;line- height :25px; 
text- align:center;background:#ececec; 


margin- left:2px; 


#nav li a:hover{ 


和 


background:# 336699;color:# eee; 


</style> 


</head> 
<body> 
<ul 


id= "nav"> 

<1li><a href= "http://www.veryhuo.com"> 首 页 </a></1li> 
<li><a href= "http://baike.liehuo.net"> 百 科 </a></li> 
<1li><a href= "http://tool.liehuo.net"> 工 具 </a></li> 
<1li><a href= "http://blog.liehuo.net">Blog< /a></1i> 
<1li><a href= "http://bbs.liehuo.net"> 论 坛 </a></li> 
<li><a href= "http://link.liehuo.net"> 链 接 </a>< /li> 


</ul> 


</body > 
</html> 


第 10 章 053 高 级 应 用 。 \N 


在 上 面 的 代码 中 使 用 了 一 些 基 本 属性 ,下 面 对 这 些 属性 进行 详细 介绍 : 
删除 圆 点 。 导 航 栏 不 需要 列表 项 标记 。 





(1) list-style-type: none 

(2) float: left 一 一 使 用 float 来 把 块 元 素 滑 向 彼此 。 

(3) display: block 把 链接 显示 为 块 元 素 可 使 整个 链接 区 域 可 点 击 (不 仅仅 是 文 
本 ) ,同时 也 人 允许 我 们 规定 宽度 。 

侠 提 示 : 有 两 种 创建 水 平 导航 栏 的 方法 : 使 用 行内 或 浮动 列表 项 。 

运行 效果 如 图 10-2 所 示 。 








中 Css 号 航 茶 单 设计 x 
$$ 3 CC Dfile///D:/code/CSs3/index .html 
= EE 

















图 10-2 水平 导航 栏 效 果 


10.3 动画 设计 


通过 CSS 能 够 创建 各 种 动画 ,这 可 以 在 许多 网 页 中 取代 动画 图 片 、Flash 动画 以 及 
JavaScript。 要 创建 CSS3 动画 ,必须 了 解 @keyframes 规则 。@keyframes 规则 用 于 创建 
动画 ,指定 一 个 CSS 样式 和 动画 将 逐步 从 目前 的 样式 更 改 为 新 的 样式 。 


103.1 @ keyframes 规则 


创建 动画 的 原理 是 将 一 套 CSS 样式 逐渐 变化 为 男 一 套 样式 。 在 创建 动画 过 程 中 能 
够 多 次 改变 CSS 样式 。 以 百分比 来 规定 改变 发 生 的 时 间 ,或 者 通过 关键 词 fom 和 to, 等 
价 于 0% 和 100%。0% 是 动画 的 开始 时 间 ,100% 动 画 的 结束 时 间 。 为 了 获得 最 佳 的 浏览 
器 支持 ,应 该 始终 定义 0% 和 100% 选 择 器 。 

@keyframes 的 语法 格式 如 下 : 





@ keyframes animationname {keyframes- selector {css- styles;}} 


@keyframes 的 属性 值 及 其 含义 如 表 10-4 所 示 。 
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表 10-4 @keyframes 属性 值 及 其 含义 
属 性 值 含 区 
animationname 必需 。 定 义 动画 的 名 称 
keyframes-selector 必需 。 动 画 时 长 的 百分比 
css-styles 必需 。 一 个 或 多 个 合法 的 CSS 样式 属性 








当 在 @keyframes 中 创建 动画 时 ,需要 捆绑 到 某 个 选择 器 上 ,否则 不 会 产生 动画 效 
果 。 通 过 规定 至 少 两 项 CSS3 动画 属性 , 即 可 以 将 动画 绑 定 到 选择 器 ,规定 动画 的 名 称 、 
时 长 ,就 可 以 实现 CSS3 动画 。 

在 例 10-3 中 设置 当 动 画 为 25% 及 50% 时 改变 背景 色 , 然 后 当 动 画 100% 完 成 时 再 次 


<!-- 例 10-3--> 
< !DOCTYPE html> 
<html lang= "en"> 
<head> 
<meta charset= "UTF- 8"> 
<title> 改 变 背 景 颜色 < /title> 
< style type= "text/css"> 
@- webkit- keyframes myfirst { /* Safari 和 Chrome */ 
from {background: red;} 
to {background: yellow;} 
} 
#div{ 
width: 260px; 
height: 260px; 
animation: myfirst 5s; 


—moz- animation: myfirst 5s; /* Firefox */ 
—webkit-animation: myfirst 5s; /* Safari 和 Chrome */ 
—o-animation: myfirst 5s7 /x* Opera */ 
} 
</style> 
</head> 
<body> 
<div id="div"> 
</div> 
</body> 
</html> 


加 提示 : keyframes-selector 合法 的 值 为 0 一 100%, 其 中 from 与 0% 相同 ,to 与 
100% 相 同 。 


1032 2D 变形 
HTML 工作 的 方式 决定 了 其 所 有 元 素 都 是 由 长 方形 方块 和 直角 边 角 组 成 ,这 样 就 导 


第 10 章 ”9 高 级 应 用 \ 四 二 


致 网 页 是 四 四 方 方 的 外 观 。2D 变换 的 出 现 意味 着 可 以 使 用 这 些 新 特性 对 元 素 进 行 旋转 、 
大 小 调整 .倾斜 和 随意 的 变换 。 

1. transform 属性 

transform 的 基本 语法 : 


transform:none | <transform- function> [<transform- function>] * 


可 用 于 内 联 元 素 和 块 元 素 。 其 默认 值 为 none, 表 示 元 素 不 进行 变形 。 另 一 个 属性 值 
是 一 系列 的 二 transform-function 记 ,表示 一 个 或 多 个 变形 函数 ,以 空格 分 开 。 换 句 话说 ， 
就 是 同时 对 一 个 元 素 进行 变形 的 多 种 属性 操作 ,例如 移动 .旋转 、 缩 放 等 。 
2D 常用 变形 函数 的 功能 如 表 10-5 所 示 。 
表 10-5 2D transform 常用 的 transform-function 的 功能 


函 数 功能 描述 


移动 元 素 , 可 以 根据 X 轴 和 YY 轴 坐 标 重新 定位 元 素 位 置 。 在 此 基础 上 有 两 个 扩 
展 函数 translateX() 和 translateY() 


缩小 或 放大 元 素 ,可 以 使 元 素 尺 寸 发 生变 化 ,在 此 基础 上 有 两 个 扩展 函数 是 





translate() 

















call scaleX() 和 scaleY() 

rotate() 旋转 元 素 

skew() 让 元 素 倾 斜 ,在 此 基础 上 有 两 个 扩展 函数 skewX()skewY() 
matrix() 定义 矩阵 变形 ,基于 X 轴 和 YY 轴 坐 标 重新 定位 元 素 位 置 


妨 注 总 . 这 里 需要 提醒 大 家 ,以 往 登 加 效果 都 是 用 “,” 隔 开 , 但 在 transform 中 使 用 
多 个 transform-function 时 却 需要 用 空格 隔 开 。 

(1) 移动 。 通 过 translate() 方 法 ,元素 从 其 当前 位 置 移动 ,根据 给 定 的 left(x 坐标 ) 
和 top(y 坐标 ) 位 置 参数 进行 移动 。 


#divi{ 
transform:translate (50px, 100px); 
} 
#div2{ 
transform:translatex (50px); 
transform:translate (100px); 
} 


(2) 缩放 。 通 过 scale 〇 方法 ,元 素 的 尺寸 会 增加 或 减少 ,根据 给 定 的 宽度 (X 轴 ) 和 
高 度 (Y 轴 ) 参 数 。 
div{ 
transform: scale (2,4); 


} 


(3) 旋转 。 通 过 rotate 〇 方法 ,元 素 顺 时 针 旋 转 给 定 的 角度 。 人 允许 负 值 ,元 素 将 逆 时 
针 旋 转 。 
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div{ 
transform:rotate (30deg); 


(4) 倾斜 。skew 函数 允许 修改 元 素 的 水 平 轴 和 垂直 轴 的 角度 ,就 像 translate 一 样 ， 
每 一 条 轴 都 有 一 个 单独 的 函数 ,两 者 都 可 以 使 用 简写 函数 。 通 过 skew () 方 法 ,元素 翻转 
给 定 的 角度 ,根据 给 定 的 水 平 线 (X 轴 ) 和 垂直 线 (Y 轴 ) 参 数 。 
div{ 
transform: skew (30deg, 20deg); 
} 


(5) 把 所 有 2D 转换 方法 组 合 在 一 起 。 通 过 matrix() 方 法 可 以 把 所 有 2D 转换 方法 
组 合 在 一 起 ,matrix() 方 法 需要 6 个 参数 ,包含 数学 函数 ,允许 旋转 、 缩 放 、 移 动 以 及 倾斜 
元 素 。 
div{ 
transform:matrix (0.866,0.5,- 0.5,0.866,0,0); 
3 


2. transform-origin 属性 

transform-origin 属性 用 来 指定 元 素 的 中 心 点 位 置 。 默 认 情 况 下 ,变形 的 原点 在 元 
素 的 中 心 点 ,或 者 是 元 素 X 轴 和 立轴 的 50% 处 。 没 有 使 用 transform-origin 改变 元 素 
原点 位 置 的 情况 下 ,CSS 进行 旋转 、 移 位 、 缩 放 等 操作 都 是 以 元 素 自己 中 心 位 置 进行 变 
形 的 。 但 很 多 时 候 需 要 在 不 同 的 位 置 对 元 素 进行 变形 操作 ,这 时 就 可 以 使 用 transform- 
origin 来 对 元 素 进行 原点 位 置 改 变 ,使 元 素 原 点 不 在 元 素 的 中 心 位 置 ,以 达到 需要 的 原 
点 位 置 。 

transform-origin 属性 的 语法 如 下 : 


transform- origin: [< percentage> | < length> |left | center | right | top | bottom ] | [< 
percentage> | <length> |left | center | right] | [ [<percentage> | <length> |left | center | 
right] && [<percentage> | < length> |top | center | bottom]] <length>? 


上 面 的 语法 看 起 来 比较 复杂 ,其 实 可 以 只 设置 一 个 值 的 语法 ,可 拆 分 成 以 下 形式 : 


transform- origin:x- offset 


transform- origin:offset— keyword 
只 设置 两 个 值 的 语法 : 


transform- origin:x- offset y-offset 

transform- origin:y- offset x-offset - keyword 
transform- origin:x- offset - keyword y-offset 
transform- origin:x- offset - keyword y-offset- keyword 
transform- origin:y- offset- keyword x-offset - keyword 


只 设置 三 个 值 的 语法 : 
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transform- origin:x-offset y-offset z-offset 
transform- origin:y-offset x-offset - keyword z-offset 
transform- origin:x- offset - keyword y-offset z-offset 
transform- origin:x- offset - keyword Y- offset- keyword 2z-offset 


transform- origin:y- offset- keyword x-offset - keyword z- offset 


transform-origin 属性 值 可 以 是 百分比 .em、px 等 具体 的 值 ,也 可 以 是 top ,right、 
bottom ,left 和 center 这 样 的 关键 词 。 
2D 变形 中 的 transform-origin 属性 可 以 有 一 个 参数 值 ,也 可 以 有 两 个 参数 值 。 如 果 
是 两 个 参数 值 时 ,第 一 个 值 设 置 水 平方 向 X 轴 的 位 置 ,第 二 个 值 用 来 设置 垂直 方向 Y 轴 
位 置 。 第 三 个 值 还 包括 了 Z 轴 ,属于 3D 变形 中 函数 ,将 会 在 后 面 详细 讲解 。 其 各 个 值 的 
取 值 简单 说 明 如 表 10-6 所 示 。 
表 10-6 2D 变形 中 的 transform-origin 属性 值 及 其 功能 





属 性 值 功 能 
用 来 设置 transform-origin 水 平方 向 X 轴 的 偏 移 量 ,可 以 使 用 一 length 之 和 
x-offset 到 percentage> 值 ,同时 可 以 是 正 值 (从 中 心 点 沿 水 平方 向 x 轴 向 右 偏 移 量 ) ,也 


可 以 是 负 值 (从 中 心 点 沿 水 平方 向 x 轴 向 左 偏 移 量 
是 top、right、bottom、left 或 center 中 的 一 个 关键 词 ,可 以 用 来 设置 transform- 
origin 的 偏 移 量 


用 来 设置 transform-origin 属性 在 垂直 方向 立轴 的 偏 移 量 , 可 以 使 用 一 length 二 
y-offset 和 二 percentage 一 值 ,同时 可 以 是 正 值 (从 中 心 点 沿 垂直 方向 y 轴 向 下 的 偏 移 
量 ), 也 可 以 是 负 值 (从 中 心 点 沿 垂直 方向 y 轴 向 上 的 偏 移 量 ) 


是 right ,left 或 center 中 的 一 个 关键 词 ,可 以 用 来 设置 transform-origin 属性 值 
在 水 平 X 轴 的 偏 移 量 


是 top、bottom 或 center 中 的 一 个 关键 词 ,可 以 用 来 设置 transform-origin 属性 值 
在 垂直 方向 立轴 的 偏 移 量 


设置 3D 变形 中 transform-origin 远离 用 户 眼睛 视点 的 距离 ,默认 值 ?一 0, 其 取 值 
可 以 是 一 length> ,不 过 一 percentage 二 在 这 里 将 无 效 





offset-keyword 








x-offset-keyword 





y-offset-keyword 





z-offset 








下 面 通过 例 10-4 来 深入 了 解 一 下 transform-origin 的 用 法 。 


<!-- 例 10-4--> 
< !DOCTYPE html> 
<html lang= "en"> 
<head> 
<meta charset= "UTF- 8"> 
<title>transform origin 用 法 示例 < /title> 
<style type= "text/css"> 
#divi{ 
position: relative; 


height: 200px; 
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width: 200px; 
margin: 100px; 
padding:10px; 
border: lpx solid black; 
} 
#div2{ 
padding:50px; 
position: absolute; 
border: lpx solid black; 
background- color: yellow; 
transform: rotate (45deg); 
transform- origin:20% 40%; 
} 
</style> 
<body> 
<div id= "div1"> 
<div id= "div2"> HELLO< /div> 
</div> 
< /body> 
</html> 


运行 效果 如 图 10-3 所 示 。 


/ [transform-origin 用 法 示 f x \N 
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图 10-3 ”transform-origin 使 用 效果 示例 


3. 2D 变形 兼容 性 

目前 CSS3 的 2D 变形 在 主流 浏览 器 中 已 得 到 较 好 的 支持 。CSS3 的 2D 变形 虽然 得 
到 了 众多 浏览 器 的 支持 ,但 在 实际 使 用 的 时 候 需 要 添加 浏览 器 各 自 的 私有 属性 。 

(1) IE9 中 使 用 2D 变形 时 ,需要 添加 -ms- 私 有 属性 ,IE10 十 版 本 开始 支持 2D 变形 。 
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(2) Firefox3. 5 至 Firefox15. 0 版 本 需要 添加 -moz- 私 有 属性 ,Firefox16 十 版 本 开始 
支持 2D 变形 。 

(3) Chrome4. 0 十 开始 支持 2D 变形 ,在 实际 使 用 的 时 候 需 要 添加 -webkit- 私 有 属性 。 

(4) Safari3. 1 十 开始 支持 2D 变形 , 在 实际 使 用 的 时 候 需 要 添加 -webkit- 私 有 属性 。 

(5) Operal0. 5 十 开始 支持 2D 变形 , 在 实际 使 用 的 时 候 需 要 添加 -o- 私 有 属性 。 但 在 
Operal2. 1 版 本 中 不 需要 添加 私有 属性 ,不 过 在 Operal5. 0 十 版 本 中 需要 添加 私有 属性 
-webkit-。 

(6) 移动 设备 的 iOS Safari 3. 2 十 .Android Browser 2. 1 十 Blackberry Browser 7. 0 十 、 
Opera Mobile 14. 0 十 .Chrome for Android25. 0 十 需要 添加 私有 属性 -webkit- ,而 Opera 
Mobile 11.0 至 Opera Mobile 12. 1 和 Firefox for Android 19. 0 十 不 需要 使 用 浏览 器 私有 
属性 。 


1032 平滑 过 渡 


Web 前 端 开发 人 员 一 直 在 寻求 通过 HTML 和 CSS 实现 一 些 动画 交互 效果 ,而 不 再 
使 用 JavaScript 或 Flash。CSS 的 过 渡 功 能 就 是 通过 一 些 CSS 的 简单 动作 触发 样式 平滑 
过 渡 。 

W3C 标准 中 描述 的 transition 功能 很 简单 ,CSS3 的 transition 允许 CSS 的 属性 值 在 
一 定 的 时 间 区 间 内 平滑 地 过 渡 。 这 种 效果 可 以 在 鼠标 单 击 、 获 得 焦点 、 被 点 击 或 对 元 素 任 
何 改变 中 触发 ,并 平滑 地 以 动画 效果 改变 CSS 的 属性 值 ,如 表 10-7 所 示 。 

















表 10-7 过 渡 属性 
属 性 功能 描述 
transition 简写 属性 ,用 于 在 一 个 属性 中 设置 四 个 过 渡 属性 
Transition-property 规定 应 用 过 渡 的 CSS 属性 的 名 称 
Transition-duration 定义 过 渡 效 果 花 费 的 时 间 ,默认 是 0 
Transition-timing-function 规定 过 渡 效 果 的 时 间 曲 线 ,默认 是 “ease” 
Transition-delay 规定 过 渡 效 果 何 时 开始 。 默 认 是 0 








以 下 是 使 用 CSS 创建 简单 过 渡 的 步骤 。 

(1) 在 默认 样式 中 声明 元 素 的 初始 状态 样式 ; 

(2) 声明 过 渡 元 素 最 终 状 态 样式 ,例如 悬浮 状态 ; 

(3) 在 默认 样式 中 通过 添加 过 渡 函 数 ,添加 一 些 不 同 的 样式 。 
下 面 来 看 例 10-5 ,加深 一 下 对 上 述 属性 的 理解 。 


<!-- 例 10-5--> 
< !DOCTYPE html> 
<html lang= "en"> 
<head> 
<meta charset= "UTE- 8"> 
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<title> 平 滑 过 渡 效 果 < /title> 
<style type= "text/css"> 
div{ 
width:100px; 
height :100px; 
background:yellow; 
/* Safari and Chrome */ 
—webkit- transition- property:width; 
-webkit-transition- duration:1s7 
—webkit— transition- timing- function:linear; 
一 webkit-transition- delay:1s; 
} 
div:hover{ 
width:200px; 
} 
</style> 
</head> 
<body> 
<div> 过 渡 属 性 < /div> 
<p> 请 把 鼠标 指针 放 到 黄色 的 div 元 素 上 ,来 查看 过 渡 效 果 。< /p> 
< /body> 
</html> 


运行 效果 如 图 10-4 和 图 10-5 所 示 。 
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请 把 鼠标 指针 放 到 黄色 的 div 元 素 上 ， 来 查看 过 渡 效 果 。 





图 10-4 实例 演示 效果 (过 渡 前 
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请 把 鼠标 指针 放 到 黄色 的 div 元 素 上 ， 来 查看 过 渡 效 果 。 








图 10-5 示例 演示 效果 (过 度 后 ) 


1033 3D 动 画 


CSS3 允许 使 用 3D 转换 对 元 素 进行 格式 化 。 通 过 本 节 的 学 习 , 大 家 对 CSS3 的 3D 
动画 会 有 一 个 较 深 的 了 解 。 三 维 变换 使 用 基于 二 维 变换 的 相同 属性 ,如 果 熟 悉 二 维 变换 ， 
会 发 现 3D 变形 的 功能 和 2D 变形 的 功能 相当 类 似 。CSS3 3D 变形 主要 包括 以 下 几 种 功 
能 函数 。 

(1) 3D 位 移 : 包括 translateZ() 和 translate3d() 两 个 功能 函数 。 

(2) 3D 旋转 : 包括 rotateX() ,rotateY() rotateZ() ,rotate3d() 四 个 功能 函数 。 

(3) 3D 缩放 : 包括 scaleZ() 和 scale3d() 两 个 功能 函数 。 

(4) 3D 和 矩阵: 和 2D 变形 一 样 ,也 有 一 个 3D 矩阵 功能 函数 matrix3d() 。 

3D 位 移 translate3d() 函数 使 一 个 元 素 在 三 维 空间 移动 。 这 种 变形 的 特点 是 ,使 用 三 
维 向 量 的 坐标 定义 元 素 在 每 个 方向 移动 多 少 。 下 面 来 看 例 10-6 ,加深 对 translate3d() 函 
数 的 理解 。 


<!-- 例 10-6--> 
<style type= "text/css"> 
div 
i 
width:100px; 
height:75px; 
background- color:yellow; 
border:1px solid black; 


div 





HIMS 网 页 设计 教程 


transform:translate3d (10px, 20px, 30px) ; 

$ 

</style> 
<body> 

<div> 你 好 。 这 是 一 个 div 元 素 。< /div> 

<div id= "div2"> 你 好 。 这 是 一 个 div 元 素 。< /div> 
< /body> 


运行 效果 如 图 10-6 所 示 。 

















PP 西 = 口 x 
口 tanslate3d 画 数 x 
© 3 © BD file///D:/code/CSSs3/index Lhtml 电 交 只 铝 三 
AT。 人 | 

个 div 元 

小 对 。 

个 div 元 








图 10-6 ”translate3d() 函 数 示 例 效 果 


3D 旋转 rotateZ() 方 法 使 元 素 围绕 其 z 轴 以 给 定 的 度数 进行 旋转 ,如 例 10-7 所 示 。 


<!-- 例 10-7--> 
<style type= "text/css"> 
div 
{ 
width:100px; 
height:75px; 
background- color:yellow; 
border:1px solid black; 


div 


transform:rotatez (140deg); 
—webkit- transform:rotateZz (140deg); /* Safari and Chrome */ 
—moz- transform:rotatez (140deg) ; /¥ Firefox *x/ 
E 
</style> 
<body> 
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<div> 你 好 。 这 是 一 个 div 元 素 。< /div> 
<div id- "div2"> 你 好 。 这 是 一 个 div 元 素 。< /div> 
</body> 


运行 效果 如 图 10-7 所 示 。 
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图 10-7 元 素 围绕 z 轴 旋转 示例 


3D 旋转 rotate3d() 方 法 有 x、y、z 轴 以 及 旋转 的 度数 四 个 参数 ,如 例 10-8 所 示 。 


<!-- 例 10-8--> 
<style type= "text/css"> 
div 
{ 
width:100px; 
height:75pxy 
background- color:yellow; 
border:1px solid black; 


transform:rotate3d (1,1,0, 45deg); 
—webkit- transform:rotate3d(1,1,0,45deg); /x* Safari and Chrome */ 
-moz- transform:rotate3d (1,1,0, 45deg) ; /x Firefox */ 
’ 
</style> 
<body> 
<div> 你 好 。 这 是 一 个 div 元 素 。< /div> 
<div id- "div2> 你 好 。 这 是 一 个 div 元 素 。< /div> 
</body> 
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运行 效果 如 代码 10-8 所 示 。 
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图 10-8 3D 旋转 rotate3d() 方 法 示例 效果 


坟 注意 ; 这 里 需要 提醒 大 家 ,scaleZ() 和 scale3d() 函 数 单独 使 用 时 没有 任何 效果 , 需 


要 配合 其 他 的 变形 函数 一 起 使 用 才 会 有 效果 。 下 面 来 看 一 个 实例 ,为 了 能 看 到 scaleZ() 函 
数 的 效果 ,我 们 添加 了 一 个 rotateX(45deg) 函 数 。 
3D 矩阵 有 一 个 3D 矩阵 功能 函数 matrix3d() ,如 例 10-9 所 示 。 


<!-- 例 10-9--> 
< !DOCTYPE html> 
<html lang= "en"> 
<head> 
<meta charset= "UTF- 8"> 
<title> 3D 和 矩阵 功能 函数 < /title> 
<style type= "text/css"> 
div 
{ 
width:100px; 
height :75px; 
background- color:yellow; 
border:1px solid black; 


transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 
6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 
13.0, 14.0, 15.0, 16.0) rotate (5deg); 
—webkit— transform: matrix3d(1.0, 2.0, 3.0, 4.0, 
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13.0, 14.0, 15.0, 16.0) rotate (5deg) ;/x Safari and Chrome x / 


5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 


—moz- transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 
6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 
14.0, 15.0, 16.0) rotate(5deg);/* Firefox */ 
} 
</style> 
</head> 
<body> 
<div> 你 好 。 这 是 一 个 div 元素 。< /div> 
<div id= "div2"> 你 好 。 这 是 一 个 div 元 素 。< /div> 
</body> 


运行 效果 如 图 10-9 所 示 。 
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图 10-9 3D 和 矩阵 功能 函数 


1034 渐变 效果 


在 CSS 中 ,渐变 被 严格 地 定义 为 一 系列 颜色 之 间 的 缓慢 过 渡 。CSS 渐变 是 最 近 才 发 
展 起 来 的 一 种 技术 ,但 却 已 经 经 历 许 多 改变 。 它 们 最 初 是 由 Webkit 团队 于 2008 年 4 月 
所 提出 的 ,从 HTMLS5 为 canvas 元 素 所 提议 的 语法 修改 而 来 。2009 年 8 月 ,Mozilla 宣布 
将 在 Firefox 的 下 一 版 本 (3. 6) 实 现 从 Webkit 修改 而 来 的 渐变 。Webkit 团队 实现 了 
W3C 的 标准 属性 ,该 属性 带 有 -webkit- 前 缀 。 

1. 线性 渐变 的 基本 用 法 

在 线性 渐变 过 程 中 ,颜色 沿 着 一 条 直线 过 渡 , 从 左 侧 到 右 侧 ,从 右 侧 到 左 侧 , 从 顶部 到 
底部 ,从 底部 到 顶部 或 沿 任意 轴 。 
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线性 渐变 是 各 种 颜色 跨 过 直线 上 两 点 之 间 的 距离 所 产生 的 一 种 逐步 过 渡 。 最 简单 的 
情况 是 ,线性 渐变 在 两 种 颜色 间 沿 着 一 条 线 成 比例 地 变化 。 
一 种 简单 的 自 左 向 右 ,两 种 颜色 的 线性 渐变 的 例子 ,如 例 10-10 所 示 。 


<!-- 例 10-10--> 
< !DOCTYPE html> 
<html lang= "en"> 
<head> 
<meta charset= "UTF- 8"> 
<title> 径 向 渐变 < /title> 
< style type= "text/css"> 
#gradient— 1{ 
width: 260px; 
height: 260px; 
background- image:-moz- linear- gradient (left,white,black); 
background- image: -webkit- gradient (linear, left center, 
right center, from(white),to (black)); 
} 
</style> 
</head> 
<body> 
<div id= "gradient- 1"> 
</div> 
< /body> 
</html> 


运行 效果 如 图 10-10 所 示 。 
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一 个 简单 的 自 右上 到 左下 \ 两 种 颜色 的 线性 渐变 的 例子 ,如 下 列 代码 所 示 。 
background- image:-moz- linear- gradient (225deg, white,black); 
background- image:- webkit- gradient (linear, 100% 0% , 0% 100% , from (white) ,to (black) ) ;} 


运行 效果 如 图 10-11 所 示 。 
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图 10-11 自 右上 向 左下 线性 渐变 示例 效果 
2. 径 向 渐变 的 基本 用 法 
径 向 渐变 比 线性 渐变 更 复杂 ,这 里 只 了 解 其 基本 用 法 以 及 相关 属性 参数 的 作用 。 径 
向 渐变 是 一 个 中 心 点 向 所 有 方向 放射 状 地 在 各 种 颜色 间 逐 步 进 行 过 渡 。 最 简单 的 径 向 渐 
变 是 两 种 颜色 在 一 个 圆 形 或 顶 圆 中 逐渐 变化 。 下 面 通过 例 10-11 来 加 强 径 向 渐变 的 
使 用 。 
<!-- 例 10-11--> 
< !DOCTYPE html> 
<html lang= "en"> 
<head> 
<meta charset= "UTF- 8"> 
<title> 径 向 渐变 < /title> 
< style type= "text/css"> 
#gradient— 5{ 
width: 260px; 
height: 260px; 
background- image: 
-moz- radial- gradient (circlefarthest- side,black,white); 
background- image: 
—webkit— gradient (radial, center center, 0,center center, 
95, from (black) ,to (white)); 
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} 

</style> 

</head> 

<body> 
<div id="gradient- 5" > 
</div> 

< /body> 

</html> 


该 示例 实现 从 方 框 中 心 开始 ,辐射 到 方 框 的 最 远 端 (水 平 ), 运 行 效果 如 图 10-12 
所 示 。 
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图 10-12 径 向 渐变 示例 效果 


3. 重复 渐变 的 基本 用 法 

线性 渐变 和 径 向 渐变 都 属于 CSS 背景 属性 中 的 背景 图 片 (background-image) 属 性 。 
有 时 候 希 望 创 建 一 个 在 元 素 背 景 上 重复 渐变 的 “模式 ”。 在 没有 重复 渐变 的 属性 之 前 , 主 
要 通过 重复 背景 图 像 ( 使 用 background-repeat) 创 建 线性 重复 渐变 ,但 是 没有 创建 重复 的 
径 向 渐变 的 类 似 方 式 。 幸运 的 是 , CSS3 通过 repeating-linear-gradient 和 repeating- 
radial-gradient 语法 提供 了 补救 方法 ,可 以 直接 实现 重复 的 渐变 效果 。 

通过 对 渐变 进行 重复 去 填充 方 框 ,可 以 在 一 定 程度 上 解决 这 一 问题 。 使 用 重复 渐变 
就 需要 使 用 -webkit- 前 级 ,如 例 10-12 所 示 。 





<!1-- 例 10-12--> 
< IDOCTYPE html> 
<html lang= "en"> 
<head> 
<meta charset= "UTF- 8"> 


<title> Document< /title> 
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<style type= "text/css"> 
#gradient— 6{ 
width: 260px; 
height: 260px; 
background- image: 
—webkit- repeating- linear- gradient (315deg,black, 
black 2px, white 2px,white 4px); 
background- image: 
repeating- linear- gradient (315deg, black, black 2px, 
white 2px,white 4px); 
3 
</style> 
< /head> 
<body> 
<div id="gradient- 6"> 
</div> 
< /body> 
</htm> 


运行 效果 如 图 10-13 所 示 。 
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图 10-13 重复 渐变 示例 效果 


Web 页 面 中 常用 纹理 图 片 制作 背景 ,这 通过 制图 软件 很 快 就 能 实现 ,但 对 于 不 懂 设 
计 的 人 来 说 这 并 不 是 一 件 易 事 。CSS3 渐变 特性 的 出 现 , 可 以 直接 使 用 代码 实现 一 些 纹 
理 背景 效果 。 

例 10-13 是 利用 CSS3 渐变 制作 纹理 背景 的 综合 示例 。 

















<!-- 例 10-13--> 
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< IDOCTYPE html> 


<html lang="en"> 


<head> 


<meta charset= "UTF- 8"> 
<title>css3 渐 变 制作 纹理 < /title> 


</head> 


<style type= "text/css"> 


.patterns{ 


} 


width: 260px; 

height: 260px; 

float: left; 

margin: 10px; 

box- shadow: 0 lpx 8px # 666; 


.gradient— 7{ 


上 


width: 260px; 

height: 260px; 

background- size: 50px 50px; 
background- color: #0ae; 
background- image: 


linear- gradient (rgba (255, 255, 2 





.gradient— 9{ 


} 


width: 260px; 

height: 260px; 

background- size: 80px 80px; 

background- color: #DDEEFF; 

background- position: 00; 

background- image: 

radial- gradient (closest- side,transparent 98% ,rgba(0,0,0, .3) 99% ); 
radial- gradient (closest- side,transparent 98% ,rgba(0,0,0, .3) 99% ); 


</style> 


<body> 


<div class= "patterns gradient- 7" > 


</div> 


<div class= "patterns gradient- 9" > 


</div> 


< /body> 
</html> 


运行 效果 如 图 10-14 所 示 。 
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图 10-14 渐变 纹理 示例 效果 


10.4 用 户 界 面 


在 CSS3 中 , 增加 了 一 些 新 的 用 户 界面 特性 来 调整 元 素 尺寸 . 框 尺寸 和 外 边框 。 本 
节 主 要 介绍 以 下 三 个 属性 : resize、box-sizing 和 outline-offset。 


1041 CSS3 调 整 尺 十 


在 CSS3 中 ,resize 属性 指定 一 个 元 素 是 否 应 该 由 用 户 去 调整 大 小 。 下 面 代码 由 用 户 
指定 一 个 div 元 素 尺寸 大 小 。 


div{ 
resize:both; 
overflow:auto; 
} 


1042 CSS3 方 框 大 小 调整 


box-sizing 属性 允许 以 确定 的 方式 定义 适应 某 个 区 域 的 具体 内 容 。 下 面 代码 中 规定 
两 个 并 排 的 带 边框 方 框 : 


div{ 
box- sizing:border- box; 
-moz-box- sizing:border-box; /* Firefox */ 
width:50s 
float:left; 


Sa HIM5 网 页 设计 教程 


1043 外 形 修饰 


outline-offset 属性 对 轮廓 进行 偏 移 ,并 在 超出 边框 边缘 的 位 置 绘制 轮廓 。 
轮廓 与 边框 有 两 点 不 同 : 轮廓 不 占用 空间 ,轮廓 可 能 是 非 矩 形 。 下 面 的 代码 中 规定 
边框 边缘 之 外 15 像素 处 的 轮廓 : 
div{ 
border:2px solid black; 
outline:2px solid red; 
outline- offset:15px; 
} 


另外 ,CSS3 还 为 用 户 界面 增加 了 许多 新 特性 。 这 些 新 特性 的 作用 如 表 10-8 所 示 。 
表 10-8 ”HTMLS 用 户 界面 的 新 特性 



































属 性 省 略 属性 值 
appearence 允许 使 一 个 元 素 的 外 观 像 一 个 标准 的 用 户 界面 元 素 
box-sizing 允许 为 适应 区 域 而 用 某 种 方式 定义 某 些 元 素 
icon 为 创作 者 提供 了 将 元 素 设置 为 图 标 等 的 能 力 
nav-down 指定 在 何 处 使 用 箭头 向 下 导航 键 时 进行 导航 
nav-index 指定 一 个 元 素 的 Tab 顺序 
nav-left 指定 在 何 处 使 用 左 侧 的 箭头 导航 键 进行 导航 
nav-right 指定 在 何 处 使 用 右 侧 的 箭头 导航 键 进行 导航 
nav-up 指定 在 何 处 使 用 箭头 向 上 导航 键 时 进行 导航 
outline-offset 外 轮廓 修饰 并 绘制 超出 边框 的 边缘 
resize 指定 一 个 元 素 是 否 是 由 用 户 调整 大 小 

10.5 页 面 布局 


本 节 针 对 CSS3 中 的 布局 做 详细 介绍 ,主要 介绍 多 栏 布 局 与 盒 布局 。CSS3 页 面 布 局 
是 一 款 响应 式 的 盒子 布局 , 单 击 其 中 的 一 个 盒子 可 切换 到 全 屏 视 图 ,其 他 的 盒子 会 自动 收 
缩 和 隐藏 。 


1051 多 栏 布局 


使 用 float 属性 或 position 属性 进行 页 面 布局 时 有 一 个 比较 明显 的 缺点 ,就 是 第 一 个 
div 元 素 与 第 二 个 div 元 素 是 各 自 独 立 的 ,因此 如 果 在 第 一 个 div 元 素 中 加 入 一 些 内 容 的 
话 ,将 使 得 两 个 元 素 的 底部 不 能 对 齐 .导致 页 面 中 多 处 一 块 空白 区 域 。 针 对 这 个 缺点 ,在 
CSS3 中 加 入 了 多 栏 布局 方式 。 使 用 多 栏 布局 可 以 将 一 个 元 素 中 的 内 容 分 成 两 栏 或 多 栏 
显示 ,如 例 10-14 所 示 。 
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= 撞 刘 -~3 
< IDOCTYPE html> 
<html lang= "en"> 
<head> 
<meta charset= "UTF- 8"> 
<title> 使 用 多 栏 布局 < /title> 
<style type= "text/css"> 
div{ 
width:40em; 
一 moz- column— count :2; 
一 webkit- column- count :2; 
} 
div{ 
width:100%; 
background- color:yellow; 
height :260px; 
} 
</style> 
</head> 
<body> 
<div id= "divl"> 
< img src= "Images/12354.jpg"> 
<p> 示 例文 字 1 示例 文字 1 示例 文字 1 示例 文字 1。 
示例 文字 1 示例 文字 1 示例 文字 1 示例 文字 1。 
示例 文字 1 示例 文字 1 示例 文字 1 示例 文字 1。 
示例 文字 1 示例 文字 1 示例 文字 1 示例 文字 1。 
</p> 
<p> 示 例文 字 2 示例 文字 2 示例 文字 2 示例 文字 2。 
示例 文字 2 示例 文字 2 示例 文字 2 示例 文字 2。 
示例 文字 2 示例 文字 2 示例 文字 2 示例 文字 2。 


示例 文字 2 示例 文字 2 示例 文字 2 示例 文字 2。 
</p> 


</div> 
<br> 
<div id="div3"> 
其 他 内 容 
</div> 
< /body> 
</html> 


运行 效果 如 图 10-15 所 示 。 


全 提示 : 在 CSS3 中 ,通过 column-count 属性 来 使 用 多 栏 布 局 方式 ,该 属性 的 含义 


是 将 一 个 元 素 中 的 内 容 分 为 多 栏 显示 。 
1052 盒 布 局 


使 用 盒 布 局 可 以 解决 使 用 float 和 position 属性 时 左右 两 栏 或 多 栏 中 底部 不 能 对 齐 的 问 
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文字 1 示例 文字 1 示例 文字 1 示例 文字 1。 和 
示例 文字 1 示例 文字 1 示例 文字 1 示例 文字 1。 
示例 文字 2 示例 文字 2 示例 文字 2 示例 文字 2。 
示例 文字 2 示例 文字 2 示例 文字 2 示例 文字 2。 
示例 文字 2 示例 文字 2 示例 文字 2 示例 文字 2。 
示例 文字 ! 示 例文 字 ! 示 例文 字 ! 示 例文 字 1。 ”示例 文字 ?示例 文字 2 示例 文字 ?示例 文字 2。 
示例 文字 1 示例 文字 1 示例 文字 1 示例 文字 1。 
其 他 内 容 


图 10-15 多 栏 布局 示例 效果 


题 。CSS3 通过 box 属性 来 使 用 盒 布 局 。 盒 布局 与 多 栏 布局 的 区 别 在 于 : 使 用 多 栏 布局 时 ， 
各 栏 宽度 必须 是 相等 的 ,在 指定 每 栏 宽 度 时 ,也 只 能 为 所 有 栏 指定 一 个 统一 的 宽度 。 
弹性 盒 布 局 模型 是 CSS3 规范 中 提出 的 一 种 新 的 布局 方式 。 该 布局 模型 的 目的 是 提 
供 一 种 更 加 高 效 的 方式 来 对 容器 中 的 条 目 进行 布局 对齐 和 分 配 空间 。 这 种 布局 方式 在 
条 目 尺寸 未 知 或 动态 时 也 能 工作 。 这 种 布局 方式 已 经 被 主流 浏览 器 所 支持 ,可 以 在 Web 
应 用 开发 中 使 用 。 下 面 详细 介绍 该 布局 模型 以 及 如 何在 具体 开发 中 应 用 该 布局 模型 来 简 
化 常见 的 页 面 布 局 场景 。 
(1) flex 容器 。 其 语法 格式 如 下 : 
display: flex | inline- flex; (适用 于 父 类 容器 元 素 上 ) 
上 面 代码 定义 一 个 flex 容器 ,内 联 或 者 根据 指定 的 值 , 来 作用 于 下 面 的 子 类 容器 。 
属性 值 的 说 明 如 下 所 示 : 
box: 将 对 象 作为 弹性 伸缩 盒 显 示 。 
inline-box: 将 对 象 作为 内 联 块 级 弹性 伸缩 盒 显 示 。 
flexbox: 将 对 象 作为 弹性 伸缩 盒 显 示 。 
inline-flexbox: 将 对 象 作 为 内 联 块 级 弹性 伸缩 盒 显 示 。 
flex: 将 对 象 作为 弹性 伸缩 盒 显 示 。 
inline-flex: 将 对 象 作 为 内 联 块 级 弹性 伸缩 盒 显 示 。 
(2) flex-grow (适用 于 弹性 盒 模型 容器 子 元 素 ) 设 置 或 检索 弹性 盒 的 扩展 比率 (根据 
弹性 盒子 元 素 所 设置 的 扩展 因子 作为 比率 来 分 配 剩余 空间 ) 。 定 义 如 下 。 


flex- grow: <number> 


属性 值 的 说 明 如 下 所 示 : 
。 去 number>: 用 数值 来 定义 扩展 比率 。 不 允许 负 值 。 
flex-grow 的 默认 值 为 0, 如 果 没有 显 式 定义 该 属性 ,是 不 会 拥有 分 配 剩余 空间 权利 的 。 
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(3) flex-shrink (适用 于 弹性 盒 模型 容器 子 元 素 ) 设 置 或 检索 弹性 盒 的 收缩 比率 ( 根 
据 弹性 盒子 元 素 所 设置 的 收缩 因子 作为 比率 来 收缩 空间 ) 。 定 义 如 下 。 


flex- shrink: <number> 

flex-shrink 的 默认 值 为 1, 如果 没有 显示 定义 该 属性 ,将 会 自动 按照 默认 值 1 在 所 有 
因子 相 加 之 后 计算 比率 来 进行 空间 收缩 。 

(4) flex-basis( 适 用 于 弹性 盒 模型 容器 子 元 素 ) 设 置 或 检索 弹性 盒 伸 缩 基准 值 。 

flex- basis: <length> | auto | <percentage> 

属性 值 的 说 明 如 下 : 

。 auto: 无 特定 宽度 值 ,取决 于 其 他 属性 值 。 

。 < 王 length>: 用 长 度 值 来 定义 宽度 。 不 允许 负 值 。 

。 一 percentage 二 : 用 百分比 来 定义 宽度 。 不 允许 负 值 。 


(5) flex (适用 于 弹性 盒 模型 子 元 素 ) 复 合 属性 。 设 置 或 检索 伸缩 盒 对象 的 子 元 素 如 
何 分 配 空间 。 


如 果 缩 写 flex: 1, 则 其 计算 值 为 : 1 1 0。 定 义 如 下 。 
flex:none | [ flex- grow ] | [ flex- shrink ] | [ flex-basis ] 
属性 值 的 说 明 如 下 : 
。 none: none 关键 字 的 计算 值 为 : 0 0 auto。 
。 [ flex-grow ]: 定义 弹性 盒子 元 素 的 扩展 比率 。 
。 [ flex-shrink ]: 定义 弹性 盒子 元 素 的 收缩 比率 。 
。[ flex-basis ]: 定义 弹性 盒子 元 素 的 默认 基准 值 。 
(6) flex-direction (适用 于 父 类 容器 的 元 素 上 ) 设 置 或 检索 伸缩 盒 对 象 的 子 元 素 在 父 
容器 中 的 位 置 。 定 义 如 下 。 
flex- direction: row | row- reverse | column | column- reverse 
属性 值 的 说 明 如 下 : 
row: 横向 从 左 到 右 排列 ( 左 对齐 ) ,默认 的 排列 方式 。 


row-reverse: 反 转 横向 排列 ( 右 对 齐 ) ,从 后 往 前 排 , 最 后 一 项 排 在 最 前 面 。 
column: 纵向 排列 。 


row-reverse: 反 转 纵向 排列 ,从 后 往 前 排 ,最 后 一 项 排 在 最 上 面 。 
3 注意 : 要 使 lex 生效 , 需 定义 其 父 元 素 display 为 flex。 


10.6 上 机 练习 


下 面 根据 页 面 布局 创建 的 一 个 简单 的 布局 实例 ,代码 如 例 10-15 所 示 。 


<!-- 例 10-15--> 
< IDOCTYPE html> 
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<html> 
<head> 
<style type= "text/css"> 

div{ 
background- color:# 12abab; 

} 

div{ 
background- color:# ff1f99; 
height:500px; 
width:10% 7 
float:left; 


div{ 
background- color:# EfEE3E; 
height :500px; 
width:90%; 
float:left; 
} 
div{ 
background- color:# 99bbbb; 
height:100px; 
width:100%; 
clear:both; 
text- align:center; 


margin- bottom:0; 


margin- bottom:0; 


font- size:14px; 


lit{ 
list- style:none; 
} 
</style> 
</head> 
<body> 
<div id= "container"> 
<div id- "header"> 
<hl>My name is ###</hl> 
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</div> 
<div id= "menu"> 
<h2>< /h2> 
<ul> 
<1li></li> 
<1li></li> 
<1li></li> 
</ul> 
</div> 
<div id= "content">< /div> 
<div id= "footer">< /div> 
</div> 
< /body> 
</html> 


运行 效果 如 图 10-16 所 示 。 
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图 10-16 简单 的 布局 样式 


10.7 本 章 小 结 


本 章 主要 介绍 CSS3 的 高 级 应 用 。 重 点 内 容 如 下 : 

(1) 块 级 元 素 的 设置 。 

(2) 动画 设计 中 的 2D、3D 动画 。 

(3) CSS3 动画 的 渐变 效果 分 为 线性 渐变 、 径 向 渐变 ,重复 渐变 以 及 纹理 渐变 。 
(4) 响应 式 页 面 布 局 允许 页 面 随 显示 环境 的 改变 进行 放大 或 缩小 。 


JavaScript 基础 语法 


学 习 本 章 的 目的 是 了 解 JavaScript 的 一 些 基 本 语法 ,为 实现 Web 前 端的 一 些 简单 效 
果 打 下 基础 。 

本 章 重 点 

。 掌握 JavaScript 实现 输出 和 语句 

。 掌握 JavaScript 的 对 象 和 函数 


11.1 JavaScript 简介 


JavaScript 是 一 种 基于 对 象 和 事件 驱动 且 具 有 安全 性 能 的 脚本 语言 。 使 用 它 的 目的 
是 与 HTML Java 脚本 语言 一 起 实现 在 一 个 网 页 中 链接 多 个 对 象 ,可 以 在 前 端 制作 动态 
页 面 效果 ,实现 人 机 交互 。 它 是 通过 嵌入 或 调和 在 标准 的 HTML 语言 中 实现 的 。 

JavaScript 的 优点 : 

(1) 简单 性 。JavaScript 是 一 种 脚本 编写 语言 , 它 采 用 小 程序 段 的 方式 实现 编程 ,与 
其 他 脚本 语言 一 样 ,JavaScript 同样 也 是 一 种 解释 性 语言 , 它 提 供 了 一 个 简易 的 开发 过 
程 。 它 的 基本 结构 形式 与 C.C++ .VB、Delphi 十 分 类 似 。 但 不 像 这 些 语言 那样 需要 先 编 
译 , 它 是 在 程序 运行 过 程 中 被 逐 行 地 解释 。 它 与 HTML 标识 结合 在 一 起 ,从 而 方便 用 户 
的 使 用 操作 。 

(2) 动态 性 。JavaScript 是 动态 的 . 它 可 以 直接 对 用 户 或 客户 输入 做 出 响应 ,无 须 经 
过 Web 服务 程序 。 它 对 用 户 的 响应 ,是 采用 以 事件 驱动 的 方式 进行 的 。 所 谓 事件 驱动 ， 
就 是 指 在 主页 中 执行 了 某 种 操作 所 产生 的 动作 ,就 称 为 “事件 ”, 例 如 按 下 鼠标 、 移 动 窗口 、 
选择 菜单 等 都 可 以 视 为 事件 。 当 事件 发 生 后 ,可 能 会 引起 相应 的 事件 响应 。 





11.2 JavaScript 的 使 用 


1121 将 JavaScript 插 入 网 页 的 方法 


与 在 网 页 中 插入 CSS 的 方式 相似 ,使 用 二 script 二 标签 可 以 在 网 页 中 插入 JavaScript 
代码 ,如 下 所 示 : 


< !-- 下 面 的 代码 表示 插入 Javascript 的 格式 --> 


< script type= "text/javascript"> 
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有 些 浏览 器 可 能 不 支持 JavaScript, 可 以 隐藏 JavaScript 代码 ,如 例 11-1 所 示 。 


</script> 


= 撞 有 和 ==3 
< !DOCTYPE html> 
<html> 
<head> 
<meta charset= "utf- 8"> 
< script type= "text/javascript"> 
= 
function disp alert() 
{ 
alert ("我 是 警告 框 !11"+ '\n'+ "hhah") // 有 换行 
+ 
-=> 
</script> 
</head> 
<body> 
<input type= "button" onclick= "disp_alert ()" value=" 显 示警 告 框 " /> 
< /body> 
</html> 


在 浏览 器 中 预览 网 页 效果 如 图 11-1 所 示 。 


/DO im = \W 
«3C Dfle///D/code/t html 
[LR 不 要 生硬 ] Javascript 提醒 











我 二 
hah 





图 11-1 隐藏 JavaScript 代码 的 演示 效果 


二 ! 一 一 二 里 的 内 容 对 于 不 支持 JavaScript 的 浏览 器 来 说 就 等 同 于 一 段 注释 ,而 对 于 
支持 JavaScript 的 浏览 器 ,这 段 代 码 仍 然 会 执行 。“//” 符 号 是 JavaScript 里 的 注释 符号 ， 
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在 这 里 添加 它 是 为 了 防止 JavaScript 试图 执行 二。 通常 情况 下 ,现在 的 浏览 器 几乎 都 支 
持 JavaScript, 即 使 是 不 支持 的 ,也 会 了 解 如 何 合理 地 处 理 含有 JavaScript 的 网 页 。 

JavaScript 的 插入 位 置 不 同 , 效 果 也 会 有 所 不 同 , 还 可 以 像 CSS 一 样 , 将 JavaScript 
保存 成 一 个 外 部 文件 ,这 些 内 容 会 在 下 一 节 讨 论 。 


1122 JavaScript 的 位 置 


JavaScript 脚本 可 以 放 在 网 页 的 head 元 素 里 或 者 body 元 素 内 ,而 且 效 果 也 不 相同 。 
(1) 放 在 body 部 分 的 JavaScript 脚本 在 网 页 读 取 到 该 语句 的 时 候 就 会 执行 ,如 
例 11-2 所 示 。 


<!-- 例 11-2--> 
< !DOCTYPE html> 
<html> 
<head> 
<meta charset= "utf- 8"> 
< /head> 
<body> 
<input type= "button" onclick= "disp alert()" value= "显示 警告 框 " /> 
< script type= "text/javascript"> 
function disp alert() 
{ 
alert ("我 是 警告 框 !11"+ '\n'+ "hhah") // 有 换行 
} 
</script> 
< /body> 
</html> 


(2) 在 head 部 分 的 脚本 在 被 调用 的 时 候 才 会 执行 ,如 例 11-3 所 示 。 


<!-- 例 11-3 --> 
< !DOCTYPE html> 
<html> 
<head> 
<meta charset= "utf- 8"> 
< script type= "text/javascript"> 
function disp_alert() 
{ 
alert ("我 是 警告 框 !11"+ '\n'+ "hhah") // 有 换行 
< /head> 
<body> 
<input type= "button" onclick="disp alert()" value=" 显 示警 告 框 " /> 
</script> 
</body> 
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</html> 


(3) 也 可 以 像 添加 外 部 CSS 一 样 添加 外 部 JavaScript 脚本 文件 ,其 后 缀 通常 为 . js, 如 
例 11-4 所 示 。 
4 
< !DOCTYPE html> 
<html> 
<head> 
<meta charset= "UTF- 8"> 
< script src="scripts.js"> 
</script> 
< /head> 
<body> 
<input type= "button" onclick= "disp alert()" value= "显示 警告 框 " /> 
< /body> 
</html> 


引入 外 部 scripts. js 的 代码 如 下 。 


function disp_alert() 
{ 

alert ("我 是 警告 框 !1"+'\n'+ "hhah") // 有 换行 
} 


11.3 JavaScript 变量 


11.3.1 变量 的 类 型 及 声明 


1. 什么 是 变量 

JavaScript 变量 用 于 保存 值 或 表达 式 。 可 以 给 变量 起 一 个 简短 名 称 , 例 如 x, 或 者 更 
有 描述 性 的 名 称 ,例如 length。 

2. JavaScript 变量 的 命名 规则 

(1) 变量 名 区 分 大 小 写 ,A 与 a 是 两 个 不 同 变量 。 

(2) 变量 名 必须 以 字母 或 者 下 画 线 开头 。 

注意: 由 于 JavaSeript 对 大 小 写 敏 感 ,变量 名 也 对 大 小 写 敏感 

3. 声明 (创建 )JavaSeript 变量 

在 JavaScript 中 创建 变量 经 常 被 称 为 “声明 ”变量 。 可 以 通过 var 语句 来 声明 
JavaScript 变量 : 


Var x; Var carname; 


在 以 上 声明 之 后 ,变量 并 没有 值 , 不 过 可 以 在 声明 它们 时 为 变量 赋值 : 
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Var x=5; var carname= "Volvo"; 

4. 变量 赋值 

(1) 通过 赋值 语句 为 JavaScript 变量 赋值 : 

x=5; carname= "Volvo"; 

变量 名 在 等 号 的 左边 ,而 需要 向 变量 赋 的 值 在 等 号 的 右 侧 。 

在 以 上 语句 执行 后 ,变量 x 中 保存 的 值 是 5, 而 carname 的 值 是 Volvo。 

(2) 向 未 声明 的 JavaScript 变量 赋值 。 如 果 所 赋值 的 变量 还 未 进行 过 声明 ,该 变量 
会 自动 声明 。 


x=5; carname= "VolVo"7 
上 面 语句 与 下 面 这 些 语句 的 效果 相同 : 
Var x=5; Var carname= "Volvo"; 


5. 变量 的 数据 类 型 

在 JavaScript 中 ,变量 是 无 所 不 能 的 容器 ,可 以 将 任何 东西 存储 在 变量 里 ,例如 : 

var quanNengl= 123; // 数 字 

var quanNeng2= "一 二 三 "7 // 字 符 串 

其 中 ,quanNeng2 这 个 变量 存储 了 一 个 字符 串 , 字 符 串 需要 用 一 对 引号 括 起 来 。 变 
量 还 可 以 存储 更 多 的 东西 ,例如 数组 ,对象 ,布尔 值 等 ,我 们 会 在 后 面 介 绍 这 些 内容 。 

6. 与 变量 相关 的 性 能 问题 

变量 在 声明 完 之 后 ,就 会 被 缓存 到 JavaScript 文件 中 ,于 是 就 能 反复 使 用 它 了 。 这 是 
一 种 提高 性 能 与 维护 性 的 好 办 法 。 与 其 把 同一 个 字符 串 反 复 输出 多 次 。 不 如 一 次 就 将 它 
声明 好 ,缓存 起 来 ,然后 在 需要 的 时 候 反复 引用 。 由 于 获取 变量 的 缓存 微乎其微 ,所 以 从 
原则 上 讲 , 只 要 某 个 数据 的 使 用 次 数 大 于 1, 就 应 该 将 其 存 人 变量 。 


11.4 JavaScript 数据 类 型 


JavaScript 是 一 种 清晰 易 懂 的 编程 语言 , 它 实现 了 脚本 语言 所 需 的 功能 ,然而 在 某 些 
方面 也 存在 着 一 些 容易 混淆 的 地 方 ,例如 JavaScript 有 几 种 简单 的 数据 类 型 : 未 定义 、 布 
尔 型 ,字符 型 和 数值 型 等 。 下 面 在 介绍 数据 类 型 相关 内 容 的 基础 上 依次 介绍 一 下 这 几 种 
数据 类 型 。 


1141 数据 类 型 的 相关 内 容 


(1) typeof。 涉 及 到 数据 类 型 ,不免 会 提 到 操作 符 typeof 。 
虽然 我 们 经 常 使 用 typeof() 的 方式 获取 对 象 的 数据 类 型 。 但 对 null 取 typeof 是 
object( 这 是 因为 null 是 空 的 对 象 引用 ) ,对 函数 取 typeof 是 function 。 
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alert (typeof null); // 返 回 cbject 
function demo (){ 
alert ('demo'); 
} 
alert (typeof demo); // 返 回 function 


(2) 为 各 种 数据 类 型 的 对 象 变 量 设 置 初始 值 。 如 果 Object 类 型 的 对 象 变量 开始 不 
知道 赋值 什么 ,不 要 用 var demo 二 {) ;最 好 是 设置 成 null。 


var d2=null; 
qd2={"'key':"shit"}; 


var d3="'; // 字 符 串 默认 
var d4=0; //Number 类 型 初始 值 设置 为 0 
var d5=null; // 对 cbject 类 型 设置 初始 默认 值 


1142 数据 类 型 


1. 未 定义 类 型 

未 定义 的 值 就 是 undefined ,注意 ,u 是 小 写 的 。 如 果 声 明 变 量 却 没有 初始 化 , 则 当前 
变量 的 值 就 是 undefined。 不 过 ,一 般 建议 尽量 给 变量 初始 化 ,但 是 在 早期 的 Javascript 
版 本 中 是 没有 规定 undefined 这 个 值 的 ,所 以 在 有 些 框架 中 为 了 兼容 旧版 浏览 器 ,会 给 
window 对 象 添加 undefined 值 ,如 下 所 示 。 

window['undefined']=window['undefined']; 

// 或 者 

window.undefined=window.undefined; 

简单 地 说 就 是 给 window 对 象 的 undefined 属性 赋 上 undefined, 在 早期 的 浏览 器 对 
象 并 没有 undefined 这 个 属性 ,所 以 如 果 使 用 到 undefined 的 操作 将 会 导致 失常 , 故 采用 
这 样 的 方式 ,不 过 一 开始 看 会 有 点 难 理解 ,在 旧版 本 的 浏览 器 中 会 因为 没有 window. 
undefined 这 个 对 象 而 返回 一 个 undefined 值 ,所 以 这 样 做 可 以 兼容 旧 浏 览 器 。 

不 过 包含 undefined 值 的 变量 与 未 定义 的 变量 是 不 一 样 的 ,如 : 


Var name; 
alert (name); //undefined 
alert (age); // 错 误 :age is not defined 


还 没 声 明 过 的 变量 只 能 执行 一 项 操作 ,其 他 全 都 不 能 做 ,就 是 使 用 typeof 操作 符 检 
测 其 数据 类 型 。 

2. 布尔 类 型 

在 JavaScript 中 布尔 类 型 还 是 常用 的 一 种 简单 数据 类 型 , 它 有 两 个 值 ,分 别 是 true 和 
false, 因 为 在 JavaScript 中 字母 是 区 分 大 小 写 的 ,所 以 True 和 False 不 是 布尔 的 值 。 

可 以 通过 如 下 方式 给 布尔 类 型 的 变量 赋值 : 
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Var testBoolean= true; 


var testBooleanl= false; 


调用 Boolean() 方 法 可 以 将 任何 类 型 的 值 转化 成 与 之 相对 应 的 布尔 类 型 的 值 ,也 就 
是 可 以 将 其 转化 成 true 或 者 false。 

3. 字符 类 型 

字符 类 型 用 于 表示 由 零 或 多 个 16 位 Unicode 字符 组 成 的 字符 序列 , 即 字符 串 。 字 符 
串 可 以 由 单 引号 () 或 双 引 号 (") 表 示 。 

var strl= "Hello"7 


Var str2= "Hello'7 

任何 字符 串 的 长 度 都 可 以 通过 访问 其 length 属性 获得 : 

alert (strl.length); // 输 出 5 

JavaScript 中 的 字符 串 是 不 可 变 的 ,其 实 这 跟 C# 中 是 一 样 的 ,字符 串 一 旦 创建 ,它们 
的 值 就 不 能 改变 ,要 改变 某 个 变量 保存 的 字符 串 , 首 先 要 销毁 原来 的 字符 串 , 然 后 再 用 另 
一 个 包含 新 值 的 字符 串 填充 该 变量 。 

Var name= "jwy"; 

name= "jwy"+ "study JavaScript";; 

这 里 一 开始 name 是 保存 字符 串 “jwy” 的 ,第 二 行 代 码 则 将 “jwy” 十 “study 
JavaScript” 值 重新 赋 给 name, 它 先 销毁 原来 的 字符 串 创建 一 个 能 容纳 这 个 长 度 的 新 字符 

Var age=11; 

var ageToString=age.toSstring();//"11" 

4. 数值 类 型 

数值 类 型 也 是 JavaScript 中 的 基本 数据 类 型 。 在 JavaScript 中 的 数字 不 区 分 整 型 和 
浮 点 型 ,所 有 的 数字 都 是 以 浮 点 型 来 表示 的 。 在 JavaScript 中 数字 的 有 效 范围 为 10 2 
到 108 之 间 。 除 了 常用 的 数字 之 外 ,JavaScript 还 支持 以 下 两 种 特殊 的 数值 。 

(1) Infinity: 当 JavaScript 中 的 使 用 数字 大 于 其 所 能 表示 的 最 大 值 时 ,就 会 将 其 输 
出 为 Initially, 即 最 大 的 意思 。 当 然 , 如 果 JavaScript 中 使 用 的 数字 小 于 其 所 能 表示 的 最 
小 值 时 ,也 会 输出 Initially。 


(2) NaN: JavaScript 中 的 NaN 是 “Not a Number” 的 意思 。 通 常 是 在 进行 数学 运算 
时 产生 了 未 知 的 结果 或 错误 ,JavaScript 就 会 返回 NaN ,这 就 代表 着 数学 运算 的 结果 是 一 
个 非 数字 的 特殊 情况 。 


9 注意: NaN 是 一 个 很 特殊 的 数字 ,不 会 和 任何 数字 相等 ,( 包 括 字符 事 NaN)。 在 
JavaScript 中 只 能 使 用 isNaN() 函 数 来 判断 运算 结果 是 不 是 NaN。 
除了 Initially 和 NaN 之 外 ,JavaScript 还 可 以 使 用 Number 对 象 来 表示 特殊 的 数值 ， 
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这 些 属 性 与 其 所 代表 的 数值 如 表 11-1 所 示 。 
表 11-1 Number 对 象 代表 的 数值 

















语 法 数 值 
Number. MAX_VALUE 用 来 表示 JavaScript 中 的 最 大 值 , 即 1. 7976931348623157e 十 308 
Number. MIN_VALUE 用 来 表示 JavaScript 中 的 最 小 的 数字 即 5e-324 
Number. NaN 用 来 表示 特殊 的 非 数字 值 
Number. POSITIVE_INFINITY | 用 来 表示 正 无 穷 大 的 数值 








5. Object 类 型 

Object 类 型 是 一 种 复杂 数据 类 型 , 它 可 以 是 任何 数据 类 型 的 数据 ,在 编译 时 如 果 不 
知道 变量 可 能 指向 哪 种 数据 类 型 时 ,请 使 用 Object。Object 中 的 数据 是 已 命名 的 数据 ， 
通常 作为 对 象 的 属性 来 使 用 。 

6. 函数 类 型 

函数 (function) 是 一 段 可 执行 的 JavaScript 代码 ,函数 具有 一 次 定义 使 用 的 特点 。 在 
JavaScript 中 的 函数 可 以 带 有 0 个 或 多 个 参数 ,在 函数 体 中 执行 JavaScript 代码 后 ,也 可 
以 返回 一 个 值 或 不 返回 值 。 

在 JavaScript 中 的 函数 也 是 一 个 数据 类 型 ,因此 ,可 以 像 其 他 的 数据 一 样 赋值 给 变量 
或 对 象 的 属性 。 

Function sum (numl, num?) 


{ 


return numl+ num27 


11.5 JavaScript 运算 符 和 表达 式 


表达 式 与 运算 符 是 一 个 程序 的 基础 , JavaScript 中 的 表达 式 和 运算 符 与 C 语 言 .C++ 
的 表达 式 和 运算 符 十 分 相似 。 
115.1 表达 式 

表达 式 是 JavaScript 语言 中 的 一 个 语句 。 该 语句 可 以 是 常量 或 变量 ,也 可 以 是 由 常 
量 、 变 量 加 上 一 些 运算 符 组 成 的 语句 。 表 达 式 可 以 分 为 如 下 3 种 。 

(1) 常量 表达 式 。 常 量 表达 式 就 是 常量 本 身 , 例 如 : 

"Javascript" 


1.3415926 


Value; 


(2) 变量 表达 式 。 变 量 表达 式 就 是 变量 的 值 ,例如 : 
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xX 
Mk 


(3) 复合 表达 式 。 复 合 表达 式 是 由 常量 、 变 量 加 上 一 些 运算 符 组 成 的 表达 式 , 例 如: 
X+Y 


5+6 
(X+Y)+ (5+ 6) 


表达 式 按 其 运算 结果 又 可 以 分 为 以 下 3 种 。 

(1) 算术 表达 式 : 运算 结果 为 数字 的 表达 式 。 

(2) 字符 串 表 达 式 : 运算 结果 为 字符 串 的 表达 式 。 

(3) 逻辑 表达 式 : 运算 结果 为 布尔 值 的 表达 式 。 
1152 运算 符 

大 多 数 运算 符 是 由 处 理 数据 的 符号 组 成 ,也 有 一 部 分 由 关键 字 组 成 。 根 据 运算 符 的 
功能 来 分 ,运算 符 的 种 类 如 表 11-2 所 示 。 

表 11-2 运算 符 的 种 类 




















运 算 符 功 能 
算术 运算 符 返回 结果 为 数字 型 的 运算 符 
比较 运算 符 比较 两 个 操作 值 , 并 返回 布尔 值 的 运算 符 
赋值 运算 符 按 位 操作 的 运算 符 
位 运算 符 用 来 表示 正 无 穷 大 的 数值 
特殊 操作 符 以 上 所 有 运算 符 之 外 的 其 他 操作 符 
1. 算术 运算 符 


数值 计算 常常 要 使 用 算术 操作 符 , 它 可 以 用 于 给 变量 赋值 ,或 者 作为 函数 或 方法 的 参 
数 。 算 术 操 作 符 的 两 边 是 一 个 操作 数 ( 操 作 数 是 在 执行 算术 运算 时 所 需要 的 数值 ) ,并 产 
生 一 个 新 结果 。 

表达 式 中 经 常用 到 的 算术 运算 符 如 表 11-3 所 示 。 

表 11-3 常用 算术 运算 符 




















运 算 符 含 义 运 算 符 含 义 
计 加 法 运算 丰 十 增 量 运算 
- 减法 运算 es 减 量 运算 
关 乘法 运算 十 val 取 正 运算 
/ 除法 运算 一 val 取 负 运算 
% 取 余 运算 

















加 减 乘除 运算 都 比较 简单 ,在 此 主要 介绍 以 下 的 几 个 运算 符 : 
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(1) % 取 余 运 算 。 取 余 运 算 可 用 于 确定 一 个 数 是 否 被 另 一 个 数 整 除 。 取 余 的 运算 结 
果 为 一 个 数 被 另 一 个 数 整除 之 后 的 余数 : 

a=bsc 

a= 5%2 // 得 到 的 余数 为 1 

(2) 十 十 增 量 运算 。 增 量 运 算是 一 个 单 目 运算 符 , 要 根据 它 在 操作 数 的 前 面 还 是 后 
面 执行 两 个 不 同 的 操作 。 例 如 ,如 果 在 操作 数 的 前 面 , 则 先 给 右 操作 数 加 1, 再 将 其 复制 
给 变量 ,如 下 所 示 : 


z= ++a; 
2=++5; // 结 果 为 6 


先 给 a 加 1, 然后 再 赋值 给 z, 如 果 a 开始 赋值 为 5, 则 执行 运算 符 之 后 ,a 的 值 为 6, 而 
z 的 值 为 6。 

如 果 在 操作 数 的 前 面 , 则 先 将 其 复制 给 变量 ,再 给 右 操 作 数 加 1: 

2= att; 

2=5++; // 结 果 为 5 

先 赋值 给 z 再 加 1, 如果 a 开始 赋值 为 5, 则 执行 运算 符 之 后 ,a 的 值 为 6, 而 z 的 值 
为 5。 

(3) 一 一 减 量 运算 。 减 量 运 算 与 增 量 运算 操作 相同 ,只 是 在 执行 操作 时 ,执行 减 1 操 
作 。 例 如 ,如 果 在 操作 数 的 前 面 , 则 先 给 右 操作 数 减 1, 再 将 其 复制 给 变量 ,如 下 所 示 : 

z=--5 | // 结 果 为 4 

先 给 a 减 1, 然 后 再 赋值 给 z, 如 果 a 开始 赋值 为 5, 则 执行 运算 符 之 后 ,a 的 值 为 4, 而 
z 的 值 为 4。 

如 果 在 操作 数 的 前 面 , 则 先 将 其 复制 给 变量 ,再 给 右 操 作 数 减 1: 

2=5-—; // 结 果 为 5 

先 赋值 给 z 再 减 1, 如 果 a 开始 赋值 为 5, 则 执行 运算 符 之 后 ,a 的 值 为 4, 而 z 的 值 
海 5 

(4) 十 val 取 正 运算 。 取 正 运算 即 无 论 输 入 的 为 正 数 还 是 负数 ,执行 运算 符 之 后 , 输 
出 的 结果 均 为 正 数 。 

(5) 一 val 取 负 运算 。 取 负 运 算 即 无 论 输 入 的 为 正 数 还 是 负数 ,执行 运算 符 之 后 , 输 
出 的 结果 均 为 负数 。 

2. 比较 运算 符 

在 JavaScript 中 ,只 要 比较 两 个 值 .结果 就 是 布尔 值 true 或 false。 根 据 对 两 个 操作 
符 行 的 测试 类 型 ,可 从 大 量 的 比较 运算 符 中 选择 一 个 ,如 表 11-4 所 示 。 


表 11-4 JavaSeript 的 比较 运算 符 












































语法 名 称 操作 类 型 结 果 浏 览 器 
eke 等 于 所 有 Boolean 所 有 
Ys 不 等 所 有 Boolean 所 有 
i pe 严格 相等 所 有 Boolean IE4,NN4,Moz 十 ,W3C 
严格 不 等 所 有 Boolean IE4,NN4,Moz 十 ,W3C 
x 大 于 所 有 Boolean 所 有 
>= 大 于 或 等 于 所 有 Boolean 所 有 
Ss 小 于 所 有 Boolean 所 有 
we 小 于 或 等 于 所 有 Boolean 所 有 





3. 字符 串 运 算 符 


字符 串 运算 符 比 较 简 单 , 只 有 十 运算 符 , 该 运算 符 的 作用 是 连接 两 个 字符 串 。 例 如 : 


var x= "hello"7 
Var y= "world"; 
Var 2=x+y; 


document .write (2); 
输出 结果 为 : 
z= "hello world" 


4. 赋值 运算 符 


在 JavaScript 中 ,只 要 将 一 个 值 或 表达 式 的 结果 复制 给 变量 ,用 于 进一步 处 理 ,就 要 


使 用 赋值 运算 符 。 
JavaScript 的 赋值 操作 符 如 表 11-5 所 示 。 


表 11-5 JavaSeript 的 赋值 操作 符 





























语法 称 示 例 含 义 
%= 取 模 并 赋值 x%=y x=x%y 
| 左 移 并 赋值 x<<=y x=x<<y 
i 右 移 并 赋值 x>=y x=x>y 
>>>= 填充 0 并 赋值 x>>>=y x=x>>>>y 
&= 按 位 "与 "并 赋值 x&=y x=x&y 
|= 按 位 "或 "并 赋值 x| 多 x=x|y 
= 按 位 " 异 或 "并 赋值 Wg iy 
日 = 解构 并 赋值 [a,b] 一 [c,d] A=¢,b=d 














如 上 面 所 示 , 除 了 简单 的 等 号 外 ,使 用 其 他 赋值 操作 符 可 以 少 输入 一 些 字符 ,特别 是 


5. 位 运算 符 


许多 值 要 在 一 系列 语句 中 结合 在 一 起 的 时 候 。 


位 运算 符 将 把 操作 数 当 作 32 位 的 二 进 制 数 (由 0 和 1 组 成 ) ,然后 按 位 对 结果 执行 操 
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作 , 运 算 符 的 类 型 决定 了 操作 的 类 型 ,如 表 11-6 所 示 。 
表 11-6 位 操作 符 的 类 型 
运算 符 含 义 
& 按 位 与 操作 ,只 有 当 两 个 操作 数 都 为 1 的 时 候 ,结果 才 是 1 
| 按 位 或 操作 ,只 有 任意 一 个 操作 数 为 1 ,结果 就 是 1 


按 位 异 或 操作 ,只 有 当 操 作 数 不 同 的 时 候 结果 才 是 1; 如 果 两 个 操作 数 都 是 1 或 都 是 0, 那 
么 结果 为 0; 否 则 结果 为 1 


ey 按 位 非 操 作 , 按 位 返回 相反 的 结果 , 即 1 返回 0,0 返回 1 























6. 特殊 运算 符 
(1) 逗号 运算 符 。 逗 号 运算 符 的 作用 是 分 隔 两 个 操作 数 ,通常 逗号 操作 符 都 与 for 语 
句 结合 使 用 。 例 如 : 


for (var i=0,j=0; i<length; i++;j+5){ 


} 


(2) typeof 运算 符 。Typeof 运算 符 作用 于 操作 数 之 前 ,该 操作 数 可 以 是 一 个 任何 类 
型 的 操作 ,typeof 运算 符 可 以 返回 一 个 字符 串 ,该 字符 串 说 明 操作 数 是 什么 类 型 。 

因为 变量 不 仅 能 包含 上 述 任 一 种 数据 类 型 ,还 可 在 运行 期 间 改变 数据 类 型 ,所 以 研究 
JavaScript 的 数据 类 型 很 有 帮助 。 根 据 值 的 类 型 ,脚本 可 能 需要 采用 不 同方 式 处 理 该 值 ， 
typeof 属性 常用 作 条 件 的 一 部 分 ,例如 : 

if(typeof myVal =="number") 

{ 

myVal=parseInt (myVal); 
} 


typeof 操作 的 值 是 一 个 字符 串 。 

(3) void 运算 符 。void 运算 符 可 以 作用 在 任何 类 型 的 操作 数 之 前 。void 运算 符 可 以 
让 操作 数 进行 运算 ,但 是 却 舍弃 运算 之 后 的 结果 .通常 为 HTML 标记 的 href 和 src 提供 
参数 ,如 链接 。 

语法 如 下 : 

JUavaScript: void dosomething (); 

例如 : 

href= "javascript:void (0)" 

void 操作 符 保 证 函数 或 表达 式 不 返回 HTML 特性 使 用 的 值 。 

(4) 条 件 运算 符 。 条 件 运 算 符 必须 有 3 个 操作 数 : 第 一 个 操作 数位 于 “?” 之 前 ;第 二 


个 操作 数位 于 “?” 和 “: ”之 间 ; 第 3 个 操作 数位 于 “: ”之 后 。 根 据 表达 式 条 件 的 结果 将 两 
个 操作 数 的 其 中 一 个 的 值 赋 值 给 变量 。 
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二 


后 面 的 两 个 操作 数 可 以 包含 任何 JavaScript 语句 ,可 以 调用 其 他 任何 函数 ,甚至 可 将 
条 件 运算 符 嵌 套 在 一 个 操作 数 中 ,达到 与 if…else 艇 套 结构 等 价 的 效果 ,为 了 保证 嵌 套 条 
件 的 正确 性 ,用 括号 将 内 部 表达 式 括 起 ,确保 它们 在 外 部 表达 式 之 前 求 值 。 例 如 : 


Var a=(b<=10)?"c" : ((b <=20) ?"e"; "f";); 


执行 该 语句 时 先 计算 第 一 个 冒号 右边 的 内 部 条 件 表达 式 , 返 回 e 或 f 值 ;然后 计算 外 
部 的 条 件 表达 式 , 返 回 或 内 部 条 件 表达 式 的 结果 。 


11.6 _ JavaScript 控制 语句 


JavaScript 的 控制 语句 包括 以 下 几 种 类 型 : 赋值 语句 、 条 件 语句 、Swith 语句 和 循环 
语句 等 。 每 种 类 型 的 语句 都 非常 直观 ,简单 易 懂 。 然 而 ,与 学 习 其 他 编程 语言 一 样 ,掌握 
JavaScript 的 这 些 语句 并 不 难 , 但 要 将 这 些 语句 组 合 使 用 则 需要 一 定 的 技巧 。 

1. 赋值 语句 

JavaScript 中 最 常见 的 语句 就 是 赋值 语句 。 赋 值 语句 是 由 左边 的 变量 , 紧 跟着 的 赋 
值 运算 符 ( 三 ) 以 及 右边 的 数值 组 成 。 最 常见 的 赋值 语句 为 单 赋值 语句 即 一 行 赋值 语句 中 
只 有 一 个 变量 名 称 和 一 个 数值 。 例 如 : 


Var str= "henan'; 

另外 还 有 多 赋值 语句 ,可 以 将 多 条 单 赋值 语句 放 到 一 行 用 分 号 隔 开 ,例如 : 
Var str=henan; var nvalue= 'xinxiang'; 

也 可 以 用 逗号 隔 开 多 个 变量 的 赋值 ,例如 : 


Var valuel, 


value2=3; 


2. 条 件 控制 语句 

if 语 句 由 关键 字 “if” 开 始 , 后 面 跟 随 一 个 逻辑 表达 式 。if 语句 根据 该 迎 辑 表达 式 的 值 
来 决定 哪些 语句 会 被 执行 。if 语 句 可 以 单独 使 用 ,也 可 以 配合 关键 字 “else” 使 用 。 下 面 ， 
先 介绍 让 语句 的 单独 使 用 的 方式 : 

(1) 第 1 种 表达 方式 if 

第 1 种 表达 方式 if 的 格式 如 下 : 

if (条件 表达 式 ) 

{ 

语句 

其 含义 如 下 : 如 果 条 件 表达 式 为 真 ( 非 0 值 ) ,就 执行 后 面 的 语句 ;如 果 条 件 表达 式 为 

假 (0 值 ) ,就 不 执行 后 面 的 语句 。 下 面 的 实例 定义 了 两 个 整 型 变量 a 和 b, 通 过 比较 它们 
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的 大 小 , 求 出 较 大 者 。 
int a, b, max; 
a=4; //a 赋 初 值 为 4 
b=2; //b 赋 初 值 为 2 
max=a; // 假 设 a 是 ab 两 者 之 间 较 大 的 数 
if (a<b) // 判 断 a 是 否 小 于 b 
{ // 如 果 表 达 式 为 真 ,b 就 是 最 大 值 
max=b; 


} 

(2) 第 2 种 表达 方式 if…else 

第 2 种 表达 方式 需要 配合 "else” 使 用 。 由 于 第 1 种 表达 方式 只 处 理 条 件 表达 式 为 真 
的 情况 ,如 果 还 要 处 理 条 件 表达 式 为 假 的 情况 ,那么 就 需要 使 用 第 2 种 表达 方式 : if… 
else。 其 格式 如 下 : 


if (条 件 表达 式 ) 





语句 1 


其 含义 如 下 : 如 果 条 件 表达 式 为 真 ( 非 0 值 ), 就 执行 后 面 的 语句 1; 如 果 条 件 表达 式 
为 假 (0 值 ) ,就 跳 过 语句 1, 执行 语句 2。 
下 面 的 实例 同样 还 是 定义 两 个 整 型 变量 a 和 b, 并 比较 它们 的 大 小 , 求 出 较 大 者 。 


int a, b, max; 


a=4; 
b=2; 
if (a<b) // 判 断 a 是 否 小 于 b 
1 // 第 一 个 程序 段 
max=b; // 如 果 表 达 式 a <b 为 真 , 则 b 为 最 大 值 
} 
else 
{ // 第 二 个 程序 段 
max=a; // 如 果 表 达 式 a <b 为 假 , 则 a 为 最 大 值 





(3) 第 3 种 表达 方式 
第 2 种 表达 方式 只 能 判断 一 个 条 件 ,如果 有 两 个 或 多 个 条 件 需 要 判断 就 不 能 满足 要 
求 了 。 第 3 种 表达 方式 if…else 让 可 以 解决 这 个 问题 ,其 格式 如 下 : 


证 (条件 表达 式 1) 


if…else if 
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{ 
语句 1 
} 
else if (条 件 表达 式 2) 
{ 
语句 2 
} 
else if (条件 表 达 式 3) 


语句 3 


其 含义 如 下 : 逐个 判断 表达 式 的 值 ,如 果 某 一 个 表达 式 为 真 ,就 执行 相应 的 语句 , 然 
后 跳出 到 整个 话语 句 之 外 。 如 果 所 有 的 表达 式 都 为 假 , 则 执行 语句 n, 然 后 继续 执行 后 面 

下 面 的 实例 定义 一 个 变量 volt ,在 volt 的 取 值 范围 内 有 多 个 判断 标准 ,使 用 条 件 语句 
的 第 3 种 表达 方式 来 依次 处 理 每 一 个 判断 条 件 。 


float volt; // 电 压 值 
int level; // 电 压 水 平 
代码 段 a 
if (3.6<volt <=3.8) // 判 断 volt 是 否 在 3.6 一 3.8 之 间 
4 
level=1; 
} 
else if (3.8 <volt <=4.0) // 判 断 volt 是 否 在 3.8 一 4.0 之 间 
4 
level=2; 
} 
else if (volt >4.0) // 判 断 volt 是 否 大 于 4.0 
{ 
level=3; 
} 
else // 如 果 以 上 条 件 都 不 满足 , 则 执行 下 面 的 代码 
{ 
level=0; 
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3. switch 语句 
JavaScript 中 switch 语句 适用 于 要 对 同一 个 表达 式 的 值 进 行 多 次 判断 的 情况 。 
JavaScript 引擎 将 执行 这 个 表达 式 , 根 据 返回 的 数值 执行 相应 的 代码 块 ,例如 : 


switch (表达 式 ){ 


} 


case 第 一 个 值 : 


default: 
语句 ; 


在 switch 语句 中 会 计算 表达 式 的 数值 ,接着 从 上 到 下 依次 执行 每 一 条 case 语句 。 如 
果 case 语句 的 数值 与 表达 式 的 数值 相等 ,那么 将 执行 相应 case 语句 中 的 代码 块 。 如 果 代 
码 块 末 尾 有 break 语句 ,那么 会 跳 过 下 列 的 case 语句 ,并 跳 转 到 switch 语句 之 后 的 语句 
中 。 否 则 ,程序 会 继续 执行 其 他 case 语句 中 的 代码 块 。 如 果 没 有 符合 的 case 语句 ,那么 
JavaScript 引擎 会 查找 可 选 的 switch 语句 ;如 果 存 在 default 语句 ,那么 会 继续 执行 
default 语句 下 的 代码 块 。 

4. 循环 控制 语句 

(1) while 循环 

while 循环 是 JavaScript 中 最 简单 的 循环 .根据 每 次 循环 开始 的 条 件 表达 式 进行 判 
断 。 也 就 是 说 ,在 循环 体内 的 代码 被 执行 之 前 ,就 会 对 出 口 条 件 求 值 。 如 果 判 断 为 true， 
则 继续 循环 ,如 果 判 断 为 false, 则 不 执行 循环 体内 的 代码 ,直接 退出 循环 。 

例如 : 


while (条 件 ){ 


} 


执行 语句 


(2) do-while 语句 

do-while 语句 与 while 语句 不 同 在 于 它 是 在 循环 体 代 码 执行 之 后 , 才 会 对 出 口 条 件 
求 值 。 即 无 论 判 断 结果 为 true 或 false, 循 环 体 内 的 代码 至 少 被 执行 一 次 。 其 他 与 while 
语句 相同 ,同样 是 如 果 判 断 为 true, 则 继续 循环 ,如 果 判 断 为 false, 则 不 执行 循环 体内 的 
代码 ,直接 退出 循环 。 


dof 
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执行 语句 ; 
jwhile (条 件 ) 


(3) for 循环 语句 
for 循环 的 代码 更 倾向 于 让 循环 执行 一 定 的 次 数 。 一 般 由 3 条 不 同 的 语句 组 成 : 赋 
值 语句 ( 设 定 初始 值 )、 条 件 判 断 语句 以 及 更 新 语句 。 语 法 如 下 : 


for ( 设 定 初始 值 ;条 件 ;更 新 数值 ) { 


} 


5. 跳 转 语句 

跳 转 语句 包含 break 语句 和 continue 语句 。break 语句 和 continue 语句 用 于 在 循环 
中 精确 地 控制 代码 的 执行 。 其 中 break 语句 会 立即 退出 循环 ,强制 继续 执行 循环 后 面 语 
句 。 而 continue 语句 虽然 也 是 立即 退出 循环 ,但 退出 循环 后 从 循环 的 顶部 继续 执行 。 

(1) break 语句 

例如 : 

Var num= 0; 

for (var i=1; i <10; i++){ 

if(i%5==0){ 


break; 
mum+ 十 了 


alert (num); AS 


在 这 个 例子 中 ,如 果 让 语句 的 条 件 为 真 , 则 执行 break 语句 退出 循环 ,执行 break 语 
句 之 后 ,要 执行 的 下 一 行 代码 是 alert() 函 数 ,结果 显示 4。 
(2) continue 语句 


例如 : 


var num=07 
for (var i=1; i <10; i++){ 
if(i %5==0){ 


continue; 
numt + 


alert (num); //8 


这 个 例子 中 ,如 果 让 语句 的 条 件 为 真 , 则 执行 continue 语句 退出 循环 ,要 执行 的 下 一 
行 代码 是 num ++ ,然后 执行 alert() 函数 ,结果 显示 为 8。 
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11.7 JavaScript 对 象 和 函数 


1171 JavaScript 对象 


JavaScript 对 象 是 JavaScript 语言 中 的 固有 的 组 件 ,而 且 与 JavaScript 的 执行 环境 无 
关 。 所 以 ,无 论 在 什么 环境 下 都 可 以 访问 JavaScript 对 象 。 对 象 通过 属性 来 获取 数据 集 
中 的 数据 ,也 可 以 通过 方法 来 实现 数据 的 某 些 功能 。 在 一 个 程序 里 通常 会 使 用 很 多 变量 
来 描述 一 些 实物 的 属性 。 

(1) 对 象 的 原型 方式 。 该 方式 利用 了 对 象 的 Prototype 属性 。 用 空 构造 函数 来 设置 
类 名 ,然后 所 有 的 属性 和 方法 都 被 直接 赋予 prototype 属性 。 

(2) 对 象 的 混合 方式 。 这 种 方式 就 是 用 构造 函数 定义 对 象 的 所 有 非 函 数 属性 ,用 原 
型 方式 定义 对 象 的 函数 属性 (方法 )。 结 果 所 有 的 函数 只 创建 一 次 ,而 每 个 对 象 都 具有 自 
己 的 对 象 属性 实例 。 


11.72 JavaScript 函数 


通常 情况 下 ,函数 是 完成 特定 功能 的 一 段 代 码 。 把 一 段 完 成 特定 功能 的 代码 块 放 到 
一 个 函数 里 ,以 后 就 可 以 调用 这 个 函数 ,这 样 就 省 去 了 重复 输入 大 量 代 码 的 麻烦 。 例 如 ， 
ert 其 实 就 是 一 个 函数 ,是 JavaScript 提供 的 函数 。 

一 个 函数 的 作用 就 是 完成 一 项 特定 的 任务 。 如 果 没 有 函数 时 ,完成 一 项 任务 可 能 需 
要 5 行 、.10 行 .甚至 更 多 的 代码 。 每 次 需要 完成 这 个 任务 的 时 候 都 重 写 一 遍 代码 显然 不 
是 一 个 好 主意 。 这 时 就 可 以 编写 一 个 函数 来 完成 这 个 任务 ,以 后 只 要 调用 这 个 函数 就 可 
Es 

定义 函数 的 语法 如 下 : 

function 函数 名 () { 

函数 代码 
| 


函数 由 关键 字 Function 定义 ,把 * 丽 数 名 " 蔡 换 为 你 想 要 的 名 字 , 把 * 代 码 " 蔡 换 为 完 
成 特定 功能 的 代码 。 
个 提示 : 在 这 里 对 对 象 和 溃 教 进行 简单 的 介绍 ,在 第 12 章 中 会 详细 介绍 。 


11.8 JavaScript 注释 
JavaScript 的 注释 与 其 他 语言 一 样 ,可 以 使 用 两 种 语法 来 表示 。 一 种 用 于 注释 大 段 
文字 ,以 一 个 斜 枉 和 一 个 星 号 开头 ,以 一 个 斜 枉 和 一 个 星 号 结尾 ,如 下 所 示 : 


/* 
* 这 是 一 个 多 行 
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* 注释 

*/ 

例如 

/¥ 

x*<div> 

*<p>this isadiv</p> 
*</div> 

* 注释 

i 


另 一 种 是 用 于 注释 单行 文字 ,如 下 所 示 : 

// 单 行 注 释 

例如 : 

//<p>this is ap level </p> 

提示 : 在 代码 中 加 入 有 意义 的 注释 是 非常 重要 的 。 它 不 仅 有 助 于 在 稍 后 阅读 代 
码 时 更 好 地 理解 当初 这 段 程序 的 含义 ,从 而 更 容易 对 其 进行 更 新 ,而 且 对 于 和 你 在 同一 个 
代码 库 中 工作 的 同事 来 说 ,也 能 起 到 开发 笔记 的 作用 。 好 程序 员 的 标志 之 一 就 是 能 书写 
好 的 注释 ,所 以 大 家 还 是 要 经 常 写 注释 哦 ! 注 释 一 定 要 言 简 意 凡 , 对 于 网 站 或 网 络 应 用 程 
序 来 说 , 它 能 当 作 第 一 手 的 开发 文档 来 用 。 


11.9 上 机 练习 





JavaScript 综 合 实 例 


本 节 完 成 一 个 较为 复杂 的 JavaScript 实例 ,具体 步骤 如 下 。 
步骤 1: 打开 笔记 本 ,如 例 11-5 所 示 , 输 入 代码 : 


<!-- 例 11-5--> 
< !IDOCTYPE html> 
<html> 
<head> 
<meta charset="utf- 8"> 
<head> 
<title> javascript 实现 的 简单 动画 < /title> 
<style type= "text/css"> 
#mydiv 
. 
width:50px; 
height :50px; 


background- color:green; 
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position:absolute; 
} 
</style> 
< script type= "text/javascript"> 
window.onload= function () // 当 文档 内 容 完 全 加 载 完毕 再 去 执行 函数 中 的 代码 
{ 
var mydiv=document .getElementById ("mydiv") ;// 获 取 id 属 性 值 为 mydiv 的 元 素 
var start= document .getElementById ("start"); 


Var stopmove= document .getElementById ("stopmove"); 


var x=0; // 设 置 一 个 变量 用 来 存放 设置 div 元 素 left 属性 值 
var flag; // 设 置 一 个 变量 存放 setInterval () 返 回 值 
function move () // 创 建 一 个 函数 用 于 规定 div 的 运动 
攻 

x x+1; // 固 定 每 次 增加 的 像素 


mydiv.style.left=x+"px"; // 设 置 div 的 left 属性 值 
start.onclick=function() // 为 start 元 素 注册 onclick 事 件 处 理 函 数 
{ 
clearInterval (flag); ”// 停 止 定时 器 函数 ,一 方 多 次 单 击 开始 按钮 造成 全 加 
效果 
flag= setInterval (move,21 开 始 运动 
} 
stopmove.onclick= function() 
{ 


clearInterval (flag); ”// 点 击 停止 运动 ,取消 定时 移动 的 计时 器 


二 

</script> 

<body> 
< input type= "button" id- "start" value= "开始 运动 " /> 
<input type= "button" id- "stopmove" value= "停止 运动 " /> 
<div id= "mydiv">< /div> 

< /body> 

</html> 


步骤 2: 将 文件 保存 为 1. html。 


步骤 3: 在 浏览 器 中 预览 网 页 效果 。 
运行 效果 如 图 11-5 所 示 。 
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图 11-5 综合 实例 运行 效果 图 


11.10 本 章 小 结 


本 章 主要 讲解 了 JavaScript 语言 的 简介 、 变 量 定义 ,数据 类 型 .运算 符 和 表达 式 ,控制 
语句 、 对 象 和 函数 等 。 

(1) 变量 的 定义 。 变 量 就 是 将 确定 的 值 赋值 给 一 个 字符 来 代替 某 一 个 或 某 一 类 
数值 。 

(2) 数据 类 型 。JavaScript 有 5 种 简单 的 数据 类 型 : 未 定义 、 空 值 ,布尔 .数值 和 字 
符 , 还 有 一 种 复杂 数据 类 型 Object。 

(3) 对 象 和 函数 。 在 一 个 程序 里 通常 会 使 用 很 多 变量 来 描述 一 些 实物 的 属性 ,对 象 
就 是 把 看 上 去 杂乱 无 章 的 变量 按 逻辑 进行 分 类 。 

通常 情况 下 ,函数 是 完成 特定 功能 的 一 段 代 码 。 把 一 段 完成 特定 功能 的 代码 块 放 到 
一 个 函数 里 ,以 后 就 可 以 调用 这 个 函数 啦 ,这 样 就 省 去 了 重复 输入 大 量 代 码 的 麻烦 。 


JavaScript 面向 对 象 编程 


学 习 本 章 的 目的 是 了 解 JavaScript 面向 对 象 编程 ,为 了 以 后 更 深入 的 了 解 并 运用 
JavaScript 打下 基础 。 

本 章 重 点 

。 掌握 JavaScript 的 常用 对 象 

。 掌握 JavaScript 的 DOM 操作 

。 掌握 JavaScript 的 事件 编程 


12.1 内 置 对 象 


1211 字符 串 对 象 

在 之 前 的 学 习 中 已 经 使 用 过 字符 串 对 象 了 。 声 明 一 个 字符 串 对 象 的 方法 就 是 直接 赋 
值 。 例 如 

var s= "我 有 个 7 个 字符 "; 

定义 s 字 符 串 之 后 ,就 有 了 一 个 字符 串 对 象 ,可 以 访问 它 的 属性 ,使 用 它 的 方法 。 

string 对 象 有 不 同 的 方法 ,有 些 方法 用 于 HTML, 而 有 些 方法 则 用 于 其 他 用 途 ， 
表 12-1 列 出 了 string 对 象 的 属性 和 方法 。 


表 12-1 string 对 象 的 属性 和 方法 






































方法 /属性 描述 参数 
Wo 返回 string 对 象 封装 的 字符 申 字面 量 “| 无 
nah 属性 ,字符 申 字面 量 的 长 度 使 用 时 不 带 括号 
tharAtvehioCodeAt ed ahd 表示 位 置 的 数字 ,从 0 开始 计数 
返回 另 一 个 字符 串 在 该 字符 囊 中 第 一 
indexOf a 所 查找 的 子 字符 串 
返回 另 一 个 字符 审 在 该 字符 囊 中 最 后 
tdexot 0 所 查找 的 子 字符 串 
slice 返回 字符 审 的 菜 个 片段 该 片段 的 起 始 和 结束 位 置 





substring, substr 返回 子 字符 串 字符 串 的 起 始 和 结束 位 置 
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续 表 
方法 /属性 描述 参 数 
splt 根据 特定 的 分 隔 符 , 分 割 字符 串 分 隔 符 和 分 隔 的 最 大 数量 
字符 吕 参 数 ,把 该 字符 中 连接 到 
5 连接 字符 申 string 对 象 的 字面 量 字符 串 
match,replace,search ”| 正则 表达 式 匹配 ,替换 和 查找 字符 囊 和 正则 表达 式 





这 里 主要 详细 讲解 以 下 几 种 字符 串 方法 。 

1. charAt 与 charCodeAt 方法 

charAt 与 charCodeAt 的 作用 在 于 取得 指定 参数 位 置 的 字符 ,从 0 开始 ,charAt 返回 
字符 , charCodeAt 返回 ASCII 码 。 当 指定 位 置 无 内 容 时 , charAt 返回 空 串 , 而 


charCodeAt 返回 NaN 。 


Var str= "abc"; 


alert (str.charRt (4)); 
alert (str.charCodeAt (4) ) 7 


2. indexOf 与 lastIndexOf 方法 
用 来 在 字符 串 内 检索 一 个 字符 或 者 一 个 字符 串 ,如果 该 字符 串 或 者 字符 存在 的 话 , 返 


回 该 字符 串 的 第 一 个 字符 的 位 置 。 


Var str= "abc"; 


alert (str.indexOf ("a")); 
alert (str.lastIndexOf ("b")); 


3. substring 与 slice 方法 

用 来 获取 子 字符 串 ,都 是 两 个 参数 ,获得 两 个 数字 间 的 字符 串 ,不 包含 结束 端的 字符 。 
slice 接受 负数 ,负数 就 是 从 尾 端 向 前 数 。 如 果 substring 的 第 一 个 参数 大 于 第 二 个 参数 ， 
它 会 在 比较 前 抽取 参数 进行 交换 。 

4. split join 与 concat 方法 

split 是 根据 一 个 分 隔 符 把 字符 串 变 成 数组 ,第 一 个 参数 是 分 隔 符 , 第 二 个 参数 是 分 
割 后 的 数组 的 大 小 ,大 于 的 将 被 删除 。 

join 方法 是 把 一 个 数组 变 为 字符 串 。 

concat 的 作用 是 连接 两 个 字符 使 其 变 为 一 个 。 


如 果 没 有 获得 则 就 返回 一 1。 


var str="11.22.33.44".split (".") .reverse() .join ("") .concat ("nihao"); 


alert (str); 


5. search 方法 


可 以 把 正则 表达 式 作 为 参数 , 当 从 字符 串 中 找到 时 ,返回 该 字符 串 的 位 置 , 若 没有 找 


到 则 返回 一 1。 


Var str= "www.hello.world"; 


alert (str.search (/hello/)); 
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6. replace 方法 

该 方法 有 2 个 参数 。 第 一 个 参数 是 正则 表达 式 ,第 二 个 参数 是 可 替换 的 内 容 。 

7. 创建 字符 串 对 象 

使 用 构造 函数 可 以 显 式 创建 字符 串 对 象 ,事实 上 ,JavaScript 会 自动 在 字符 串 与 字符 
串 对 象 之 间 进 行 转换 ,创建 字符 串 对 象 的 构造 函数 如 下 : 


new String (str); 

其 中 str 参数 为 要 创建 字符 串 对 象 的 字符 串 或 变量 。 在 创建 字符 串 对 象 时 ,如 果 使 
用 了 new 运算 符 , 则 返回 一 个 新 的 字符 串 对 象 。 如 果 省 略 new 运算 符 , 则 把 str 转换 成 字 
符 串 ,并 返回 转换 后 的 值 。 

1212 数学 对 象 

math 对 象 提供 对 数据 的 数学 计算 。 如 表 12-2 和 表 12-3 所 提 到 的 属性 和 方法 ,这 里 

不 再 详细 说 明 “ 用 法 ”, 大 家 在 使 用 的 时 候 记 住 用 “Math. 二 名 二 ”这 种 格式 。 
表 12-2 math 对 象 属性 




















属 性 描 述 

E 返回 算术 常量 e, 即 自然 对 数 的 底数 ( 约 等 于 2.718) 
LN2 返回 2 的 自然 对 数 ( 约 等 于 0.693) 

LN10 返回 10 的 自然 对 数 ( 约 等 于 2. 302) 

LOG2E 返回 10 的 自然 对 数 ( 约 等 于 2. 302) 

LOG10E 返回 以 10 为 底 的 e 的 对 数 ( 约 等 于 0. 434) 

PI 返回 圆周 率 ( 约 等 于 3. 14159) 


表 12-3 常用 math 对 象 方法 























方 ”法 描述 
abs(x) 返回 数 的 绝对 什 
max(xyy) 返回 x 和 y 中 的 最 高 值 
minCxyy) 返回 x 和 y 中 的 最 低 值 
sqrt(x) 返回 数 的 平方 根 

1213 日 期 对 象 


日 期 对 象 Date 可 以 储存 任意 一 个 日 期 ,从 0001 年 到 9999 年 ,并 且 可 以 精确 到 毫秒 
数 (1/1000 秒 ) 。 
如 下 定义 一 个 日 期 对 象 : 


var today=new Date(); 
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这 个 方法 使 d 成 为 日 期 对 象 .并 且 已 有 初始 值 : 当前 时 间 。 如 果 要 自 定 初始 值 , 可 以 


用 下 列 方法 : 
var d=new Date (99, 10, 1); //99 年 10 月 1 日 
var d=new Date('Oct 1, 1999'); //99 年 10 月 1 日 
1214 数组 对 象 


数组 对 象 是 一 个 对 象 的 集合 ,里 边 的 对 象 可 以 是 不 同类 型 的 。 数 组 的 每 一 个 成 员 对 
象 都 有 一 个 “下 标 ”, 用 来 表示 它 在 数组 中 的 位 置 , 从 零 开 始 计数 。 
数组 的 定义 方法 中 下 : 


var < 数组 名 >=new Array (); 
如 下 可 以 添加 数组 元 素 : 
< 数组 名 > [< 下 标 >]= .… : 


下 标 用 方 括号 括 起 来 。 
如 果 要 在 定义 数组 的 时 候 直 接 初始 化 数据 ,可 以 用 : 


var < 数组 名 >=new Array (< 元 素 1>，< 元 素 2>, < 元 素 >); 
例如 : 
Var myArray=new Array(l, 4.5, 'Hi'); 


定义 数组 myArray, 其 中 myArray[0]==1,myArray[1]==4.5, myArray[2] 二 'Hi'。 
定义 时 指定 有 n 个 空 元 素 的 数组 ,可 以 用 : 


Var a=new Array (n); 
数组 对 象 的 常用 方法 如 表 12-4 所 示 。 
表 12-4 数组 对 象 的 常用 方法 


方法 描 述 
length() | 返回 数组 的 长 度 , 即 数组 中 有 多 少 个 元 素 。 它 等 于 数组 中 最 后 一 个 元 素 的 下 标 加 一 


返回 一 个 字符 串 ,该 字符 串 把 数组 中 的 各 个 元 素 串 起 来 ,用 一 分 隔 符 二 置 于 元 素 与 元 
素 之 间 。 这 个 方法 不 影响 数组 原本 的 内 容 

返回 一 个 数组 ,该 数组 是 原 数组 的 子 集 , 始 于 雪 始 > ,终于 雪 终 之 。 如 果 不 给 出 二 终 >， 
则 子 集 一 直 取 到 原 数 组 的 结尾 

使 数组 中 的 元 素 按照 一 定 的 顺序 排列 。 如 果 不 指定 志方 法 函数 之 , 则 按 字母 顺序 排 
sort() 列 。 在 这 种 情况 下 ,80 排 在 9 之前。 如果 指定 二 方法 函数 忆 , 则 按 一 方法 函数 所 指 
定 的 排序 方法 排序 


使 数组 中 的 元 素 顺 序 反 过 来 。 如 果 对 数组 [1，2,，3] 使 用 这 个 方法 , 它 将 使 数组 变 成 
[3, 2, 1] 











joinO) 





slice() 








reverse() 
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1215 Boolean 对 象 


在 用 JavaScript 创建 任何 逻辑 时 Boolean 是 必要 的 。Boolean 是 一 个 代表 true 或 
false 值 的 对 象 。Boolean 对 象 可 以 有 多 个 值 ,这 些 值 都 相当 于 false 值 (0、 一 0、null 或 "" 
(一 个 空 字 串 ))。 所 有 其 他 布尔 值 相当 于 true 值 。 该 对 象 可 以 通过 new 关键 词 进行 实例 
化 ,但 通常 是 一 个 被 设 为 true 或 false 值 的 变量 : 


var myBoolean= true; 


Boolean 对 象 包括 toString 和 valueOf 方法 ,尽管 不 太 可 能 需要 使 用 这 些 方 法 。Boolean 
最 常用 于 在 条 件 语句 中 true 或 false 值 的 简单 判断 。 布 尔 值 和 条 件 语句 的 组 合 提供 了 一 种 
使 用 JavaScript 创建 逻辑 的 方式 。 此 类 条 件 语 句 的 示例 包括 if、if…else、if…else*…if 以 及 
switch 语句 。 当 与 条 件 语 句 结合 使 用 时 ,可 以 基于 编写 的 条 件 使 用 布尔 值 确定 结果 。 
Var myBoolean= true; 
if (myBoolean==true) { 
// 如 果 条 件 为 true 
} 
else { 
// 如 果 条 件 为 false 
} 


不 言 而 喻 ,Boolean 对象 是 JavaScript 一 个 极其 重要 的 组 成 部 分 。 如 果 没 有 Boolean 
对 象 , 在 条 件 语句 内 便 无 法 进行 判断 。 


12.2 宿主 对 象 


1221 DOM 对 象 的 属性 和 方法 


很 多 时 候 ,DOM 操作 都 比较 简明 ,因此 用 JavaScript 生成 那些 通常 原本 是 用 HTML 
代码 生成 的 内 容 并 不 麻烦 ,不 过 ,有 些 时 候 , 操 作 DOM 并 不 像 表 面 上 看 起 来 那么 简单 。 
由 于 浏览 器 中 充斥 着 隐藏 的 陷阱 和 不 兼容 问题 ,用 JavaScript 代码 处 理 DOM 的 某 些 部 
分 更 复杂 一 些 。DOM 对 象 包含 页 面 的 实际 内 容 ,其 属性 和 方法 通常 会 影响 文档 在 窗口 
的 外 观 和 内 容 。 

表 12-5 和 表 12-6 介绍 了 DOM 常见 的 属性 和 方法 。 

表 12-5 DOM 对 象 的 属性 




















属 性 描 述 
提供 对 二 body 二 元 素 的 直接 访问 。 对 于 定义 了 框架 集 的 文档 ,该 属性 引用 最 外 
ody 
层 的 <<frameset 二 
cookie 设置 或 返回 与 当前 文档 有 关 的 所 有 Cookie 
domain 返回 当前 文档 的 域名 
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续 表 
属 性 描 述 

lastModified 返回 文档 被 最 后 修改 的 日 期 和 时 间 

referrer 返回 载 入 当前 文档 的 文档 的 URL 

title 返回 当前 文档 的 标题 

URL 返回 当前 文档 的 URL 

表 12-6 DOM 对 象 的 方法 
方 法 描 述 

close() 关闭 用 document. open() 方 法 打开 的 输出 流 , 并 显示 选 定 的 数据 
getElementById() 返回 对 拥有 指定 id 的 第 一 个 对 象 的 引用 
getElementsByName() 返回 带 有 指定 名 称 的 对 象 集合 





getElementsByTagName() | 返回 带 有 指定 标签 名 的 对 象 集合 
打开 一 个 流 ,以 收集 来 自任 何 document. write() 或 document. writeln() 














a 方法 的 输出 
write() 向 文档 写 HTML 表达 式 或 JavaScript 代码 
writeln() 等 同 于 write() 方 法 ,不同 的 是 在 每 个 表达 式 之 后 写 一 个 换行 符 


这 里 详细 介绍 一 下 DOM 的 以 下 几 种 方法 。 

1. getElementById() 方 法 

getElementById() 方 法 返回 具有 指定 ID 属性 值 的 第 一 个 对 象 的 一 个 引用 ,如 例 12-1 
所 示 。 


<!-- 例 12-1--> 
< !DOCTYPE html> 
<html> 
<head> 
<meta charset= "utf- 8"> 
< script type= "text/javascript"> 
function alignRow () 
{ 
var x= document .getElementById('myTable') .rows 
x[0] .align= "right" 
} 
</script> 
</head> 
<body> 
<table width= "60%" id= "myTable" border="1"> 
<tr> 
<tq> 行 1 单元 格 1< /td> 
<td> 行 1 单元 格 2< /td> 


</tr> 
RE 
<td> 行 2 单元 格 1< /td> 
<td> 行 2 单元 格 2< /td> 
</tr> 
<tr> 
<td> 行 3 单元 格 1< /td> 
<td> 行 3 单元 格 2< /td> 
</tr> 
</table> 
<form> 
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<input type= "button" onclick= "alignRow()" value=" 右 对 齐 第 一 行文 字 "> 


< /form> 
< /body> 
</html> 


运行 效果 如 图 12-1 所 示 。 















































= 可 x 
BD 1html x \ 
€ 3 G |D file///D:/code/1.html 安 己 
行 1 单元 格 ] 行 1 单元 格 3 
2 单元 格 1 | 行 2 单元 格 2 
星 3 单元 格 1 行 3 单元 格 2 
右 对 齐 第 一 行文 字 
































图 12-1 getElementById() 演 示 效 果 


2. getElementsByName() 方 法 


getElementsByName() 方 法 可 返回 带 有 指定 名 称 的 对 象 的 集合 。 


语法 如 下 : 


document .getElementsByName (name) 


该 方法 与 getElementById() 方 法 相似 ,但 它 查 询 的 是 元 素 的 name 属性 ,而 不 是 id 属性 。 
另外 ,因为 一 个 文档 中 的 name 属性 可 能 不 唯一 (如 HTML 表单 中 的 单 选 按钮 通常 


具有 相同 的 name 属性 ) ,所 有 getElementsByName() 方 法 返回 的 是 name 属性 值 ,而 不 是 
一 个 元 素 ,如 例 12-2 所 示 。 





<meta charset= "utf- 8"> 
< script type= "text/javascript"> 
function getElements() { 
Var x= document .getElementsByName ("myInput"); 
alert (x.length); 
} 
</script> 
</head> 
<body> 
<input name= "myInput" type= "text" size="20" /><br /> 
< input name= "myInput" type= "text" size="20" /><br /> 
< input name= "myInput" type= "text" size="20" /><br /><br /> 
<input type= "button" onclick="getElements ()"value="How many elements named ' 
myInput'?" /> 
< /body> 





























图 12-2 getElementsByName() 演 示 效 果 


1222 DOM 对 象 的 操作 


在 构建 网 站 界面 时 ,经 常 需要 对 DOM 进行 一 些 动 态 的 操作 ,诸如 获取 节点 、 插 和 人 节 
点 ,创建 新 节点 、 向 其 中 填充 内 容 以 及 将 它们 移动 到 文档 中 的 其 他 位 置 等 。 





1. 向 DOM 中 新 增 元 素 
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通常 需要 以 下 3 步 。 


(1) 创建 元 素 。 用 createElement() 方 法 如 下 创建 元 素 : 

Var src= document .createElement ("src"); 

(2) 填充 内 容 : 用 createTextNode() 方 法 来 填充 内 容 : 

Var value= document .createTextNode ("text"); 

(3) 放 入 DOM。 将 新 元 素 插入 到 DOM 中 ,用 appendChild() 方 法 来 完成 
node.appendchild(value) 


将 节点 插入 到 最 后 。 上 面 两 个 创建 的 节点 不 会 自动 添加 到 文档 里 ,所 以 就 要 使 
appendChild 来 插入 了 。 
如 果 是 新 的 节点 则 插入 到 最 后 ,如 果 是 已 经 存在 的 节点 则 是 移动 到 最 后 。 理 解 了 这 
点 ,再 与 下 面 的 方法 结合 ,可 以 方便 地 移动 操作 节点 。 
2. 从 DOM 中 替换 节点 
用 replaceChild() 方 法 来 替换 DOM 中 的 节点 。 删 除 一 个 子 节点 ,并 用 一 个 新 节点 代 
蔡 它 ,第 一 个 参数 为 新 建 的 节点 ,第 二 个 节点 为 被 蔡 换 的 节点 ,例如 : 
<div id= "divl"> 
<p id= "pl"> 我 是 第 一 个 P< /p> 
<P id= "p2"> 我 是 第 二 个 P< /p> 
</div> 
window.onload= function () { 
var divl= document .getElementById ("div1"); 
Var spanl= document .createElement ("span"); 
spanl.textContent= "我 是 一 个 新 建 的 span"; 
divl.replaceChild (spanl, document .getElementById("p2")); 
执行 之 后 代码 变 为 : 
<div id= "divl"> 
<p id- "pl"> 我 是 第 一 个 P< /p> 
<span> 我 是 一 个 新 建 的 span< /span> // 留 意 到 p2 节点 已 经 被 替换 为 spanl 节 点 了 
</div> 
3. 在 DOM 中 移 除 节点 
用 removeChild() 方 法 来 移 除 DOM 中 的 节点 。 由 父 元 素 调用 ,删除 一 个 子 节点 。 注 
意 是 直接 父 元 素 调用 ,删除 直接 子 元 素 才 有 效 ,删除 孙子 元 素 就 没有 效果 了 。 
<div id="divi"> 
<P id= "pl"> 我 是 第 一 个 P< /p> 
<p id- "p2"> 我 是 第 二 个 P< /p> 
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</div> 
window.onload= function () { 
var divl= document .getElementById ("div1"); 
divl.removeChild (document .getElementById ("p2")); 
} 


执行 之 后 代码 变 为 : 

<div id="divi"> 

<p id="p1"> 我 是 第 一 个 P< /p> // 注 意 到 第 二 个 P 元 素 已 经 被 移 除 了 
</div> 


1223 window 对 象 


对 象 层 次 结构 的 顶层 是 window 对 象 ,这 个 对 象 处 于 对 象 链 的 顶端 ,因为 它 是 Web 
浏览 器 中 查看 所 有 内 容 的 主要 容器 ,只 要 打开 浏览 器 窗口 ,即便 窗口 中 没有 加 载 文档 ， 
window 对 象 也 在 内 存 的 当前 模型 中 定义 好 了 。 

window 对 象 能 使 DOM 方便 地 关联 一 个 方法 ,来 显示 模式 对 话 框 ,调整 浏览 器 窗口 
底部 状态 的 文本 。window 对 象 方法 允许 创建 显示 在 屏幕 上 的 独立 窗口 。 

window 的 属性 有 很 多 。 这 里 主要 介绍 以 下 属性 。 

1. status 属性 

语法 格式 如 下 : 

window.status= 字 符 串 


功能 : 设置 或 给 出 浏览 器 窗口 中 状态 栏 的 当前 显示 信息 。 

2. location 属性 

语法 格式 如 下 : 

window.location=URL 

功能 : 给 出 当前 窗口 的 URL 信息 或 指定 打开 窗口 的 URL。 

3. self 属性 

语法 格式 如 下 : 

window.self. 属 性 

功能 : 该 属性 包含 当前 窗口 的 标志 ,利用 这 个 属性 ,可 以 保证 在 多 个 窗口 被 打开 的 情 
况 下 ,正确 调用 当前 窗口 内 的 函数 或 属性 而 不 会 发 生 混 乱 。 

4. name 属性 

语法 格式 如 下 : 

window.name= 名 称 


功能 : 返回 窗口 名 称 ,这 个 名 称 是 由 window. open() 方 法 创建 新 窗口 时 给 定 的。 在 
JavaScript 1. 0 版 本 中 ,这 个 属性 只 能 用 于 读 取 窗 口 名 称 ,而 到 了 JavaScript 1. 1 版 本 时 ， 
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可 以 用 这 个 属性 给 一 个 不 是 用 window. open() 方 法 创建 的 窗口 指定 一 个 名 称 。 

5. Alert() 方 法 

这 个 方法 会 产生 一 个 对 话 框 ,显示 作为 参数 传递 的 文本 ,OK 按钮 允许 关闭 这 个 警 
告 框 。 

6. Confirm() 方 法 

这 个 方法 在 弹出 对 话 框 时 有 返回 值 , 单 击 OK 按钮 的 返回 值 为 true, 单 击 Cancel 按 
钮 的 返回 值 为 false, 用 这 个 对 话 框 和 它 的 返回 值 ,用 户 可 以 决定 如 何 继续 进行 。 

7. Prompt() 方 法 

这 个 方法 弹出 的 对 话 框 弹出 的 是 提示 对 话 框 。 它 显示 了 预 置 的 信息 ,并 提供 一 个 文 
本 域 ,供用 户 输入 响应 。 


12.3 常用 其 他 对 象 


123.1 表单 对 象 


表单 对 象 可 以 让 用 户 实现 输入 文字 ,选择 选项 和 提交 数据 的 功能 。 
表单 对 象 代表 一 个 HTML 表单 ,在 HTML 文档 中 每 出 现 一 对 form 标记 ,form 对 象 
就 会 被 创建 。 表 12-7 和 表 12-8 分 别 介绍 了 表单 的 常用 属性 和 方法 。 
表 12-7 表单 的 常用 属性 












































属 性 描 述 
acceptCharset 服务 器 可 接受 的 字符 集 
action 设置 或 返回 表单 的 action 属性 
enctype 设置 或 返回 表单 用 来 编码 内 容 的 MIME 类 型 
id 设置 或 返回 表单 的 id 
length 返回 表单 中 的 元 素数 目 
method 设置 或 返回 将 数据 发 送 到 服务 器 的 HTTP 方法 
name 设置 或 返回 表单 的 名 称 
target 设置 或 返回 表单 提交 结果 的 表单 或 窗口 

表 12-8 表单 的 常用 方法 

方 法 描 述 
reset() 把 表单 的 所 有 输入 元 素 重 置 为 它们 的 默认 值 
submit() 提交 表单 

1232 Image 对象 


预 载 人 图 像 最 简单 的 方法 是 在 JavaScript 中 实例 化 一 个 新 Image() 对 象 ,然后 将 需 
要 载 人 的 图 像 的 URL 作为 参数 传人 。 假 设 有 一 个 图 像 名 为 heavyimagefile. jpg ,在 用 户 
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的 鼠标 放 到 一 个 已 经 显示 的 图 像 之 上 时 ,希望 显示 这 个 图 像 。 为 了 预 载 和 这 一 图 像 从 而 
得 到 较 快 的 响应 时 间 , 先 创建 一 个 Image() 对 象 heavyImage, 然 后 在 onLoad() 事件 处 
理 器 中 将 其 同时 载 入 ,如 下 所 示 : 


<head> 
< script language= "JavaScript"> 
function preloader () 
t 
heavyImage=new JImage () 7 
heavyImage.src= "heavyimagefile.jpg"; 
} 
</script> 
</head> 
<body onLoad= "javascript:preloader () "> 
<a href="#" onMouseOver= "javascript :document .img01.src= 'heavyimagefile.jpg'"> 
< img name= "img01" src= "justanotherfile.jpg"></a> 
< /body> 


12.4 事件 编程 


事件 是 另 一 种 当 异 步 回 调 完 成 处 理 后 的 通信 方式 。 一 个 对 象 可 以 成 为 发 射 器 并 派发 
事件 ,而 男 外 的 对 象 则 监听 这 些 事件 。 


1241 事件 处 理 


事件 处 理 是 对 象 化 编程 的 一 个 很 重要 的 环节 ,没有 了 事件 处 理 , 程 序 就 会 变 得 很 死 
板 ,缺乏 灵活 性 。 事 件 处 理 的 过 程 可 以 这 样 表示 : 发 生 事件 一 启动 事件 处 理 程序 一 事件 
处 理 程序 作出 反应 。 其 中 ,要 使 事件 处 理 程序 能 够 启动 ,必须 先 告 诉 对 象 , 如 果 发 生 了 什 
么 事情 ,要 启动 什么 处 理 程序 ,和 否则 这 个 流程 就 不 能 进行 下 去 。 事 件 的 处 理 程序 可 以 是 任 
意 JavaScript 语句 ,但 是 一 般 用 特定 的 自 定义 函数 (function) 来 处 理事 情 。 

事件 处 理 主要 有 以 下 3 种 方式 。 

1. 设置 HTML 标签 属性 为 事件 处 理 

文档 元 素 的 事件 处 理 程 序 属性 ,其 名 字 由 “on”" 后 面 跟着 事件 名 组 成 ,例如 onclick、 
onmouseover。 当 然 , 这 种 形式 只 是 为 DOM 元 素 注册 事件 处 理 程序 。 


过 标记 -as 事件 = "事件 处 理 程序 ” [事件 = "事件 处 理 程序 ]> 
例如 : 
<body ... onload- "alert (' 网 页 读 取 完成 ,请 慢 慢 欣 赏 !1')" onunload="alert(' 再 见 !')"> 


2. 设置 JavaScript 对 和 象 属性 为 事件 处 理 程序 
可 以 通过 设置 某 一 事件 目标 的 事件 处 理 程 序 属性 来 为 其 注册 相应 的 事件 处 理 程序 。 
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语法 如 下 : 


<script language= "JavaScript" for= "对象" event= "事件"> 
(事件 处 理 程序 代码 ) 


</script> 
例如 : 


< script language= "JavaScript" for= "window" event= "onload"> 


alert ("网 页 读 取 完成 ,请 慢 慢 欣赏 !'); 


有 件 处 理 程序 属性 名 字 由 “on” 后 面 跟着 事件 名 组 成 ,例如 onclick、onmouseover。 

















</script> 
1242 事件 驱动 
JavaScript 中 的 事件 驱动 是 通过 鼠标 或 热 键 的 动作 引发 的 。 常 用 事件 如 表 12-9 
所 示 。 
表 12-9 常用 事件 
事 件 描 述 事 件 描 述 
onClick 单 击 事件 onLoad 载 和 文件 
onChange 改变 事件 unLoad 印 载 文 件 
onSelect 选中 事件 ‘onMouseOver 鼠标 指示 事件 
onFocus 获得 焦点 事件 onSubmit 提交 事件 
onBlur 失去 焦点 











1. onClick 事件 





当 用 户 单 击 鼠标 按钮 时 ,产生 onClick 事件 。 同 时 onClick 指定 的 事件 处 理 程序 或 代 


码 将 被 调用 执行 。 激 发 单 击 的 事件 如 表 12-10 所 示 。 
表 12-10 激发 单 击 事件 的 对 象 
































事 件 描 述 事 件 描 述 
button 按钮 onLoad 载 人 文件 
checkbox 复 选 框 unLoad 外 载 文件 
radio 单 选 框 ‘onMouseOver 鼠标 指示 事件 
reset buttons 重要 按钮 onSubmit 提交 按钮 
submit buttons 失去 焦点 





例如 ,可 以 通过 下 面 的 按钮 激活 change() 函 数 ,当然 change() 函 数 是 需要 另外 提 


供 的 : 
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< form> 
< /span> input type= "button" value="" onClick="change () "> 
</span> 

< /form> 


在 onClick 等 号 后 ,可 以 使 用 自己 编写 的 函数 作为 事件 处 理 程序 ,也 可 以 使 用 
JavaScript 的 内 部 函数 ,还 可 以 直接 使 用 JavaScript 代码 等 。 


<body> 
<form> 
<span> 请 输入 基本 资料 :<br> 
姓名 : 
</span> 
< span> < input type= "text" name= "usr" size= "8"> 
</span> 
< span> < input type= "button" value= "请 单 击 " onclick= "alert (' 谢 谢 你 的 填写 ...')" 
> 
</span> 
< /fom> 
< /body> 
单 击 “ 请 单 击 ” 按 钮 后 将 激发 onClick 事件 , 即 弹 出 “谢谢 你 的 填写 . . . "警告 框 。 
2. 获得 焦点 事件 
当 用 户 单 击 text 或 textarea 以 及 select 对 象 时 ,产生 该 事件 。 此 时 该 对 象 成 为 前 台 
对 象 。 


该 事件 适用 对 象 button checkbox ,fileUpload ,layer、password radio ,reset select、 
submit text textarea\window。 

在 下 面 的 例子 中 , 当 鼠 标 移 到 文本 域 的 地 方 即 获得 焦点 时 ,立刻 弹出 一 个 提示 ”已 经 
获得 焦点 1” 的 警告 框 : 

< span> < input type= "textarea" value="" name= "valueField" onFocus= "alert (' 已 经 获得 焦点 ! 

由 > 

</span> 

3. 鼠标 指示 事件 

当 鼠 标 指 到 相应 的 位 置 时 引发 的 事件 。 事 件 适 用 对 象 有 layer link。 

在 下 面 的 例子 中 ,用 href 给 “Click me” 加 上 一 个 超 链接 , 当 鼠 标 指 到 超 链接 “Click 
me” 时 ,将 在 状态 栏 提示 字符 串 “Click this if you dare!”。 

<a href= "http://www-myhome-com/" 

‘onMouseOver= "window.status= 'Click this if you dare!'; return true"> 


Click me 
</a> 


当 鼠 标 指 到 文字 “Click me” 上 时 ,将 在 状态 栏 显示 提示 字符 串 。 


"Click this if you dare!™ 





第 12 章 “_bfrpt 面 向 对 象 编程 \®/ 
4. 提交 事件 


它 是 在 点 击 提交 按钮 时 引发 的 事件 。 事 件 适用 的 对 象 有 form。 
语法 如 下 : 
onSubmit="handlerText" 
在 下 面 的 例子 中 ,在 单 击 “ 提 交 ” 按 钮 时 ,就 会 弹出 一 个 “你 确认 提交 吗 ?” 提 示警 告 框 。 
< form onSubmit="alert ("你 确认 提交 吗 ? ') "> 
< span> < input type= "text" name= "txt" value= "测试 文本 "> 
</span> 
< span> < input type= "submit" value= "提交 "> 


</span> 
< /form> 


12.5 上 机 练习 





JavaScript 综合 实例 


本 节 完 成 一 个 较为 复杂 的 JavaScript 示例 ,具体 步骤 如 下 。 
步骤 1: 打开 笔记 本 ,输入 如 例 12-3 所 示 的 代码 : 


关 肥 二 傅 驹 = 了 = 
< !IDOCTYPE html> 
<html> 
<head> 
<meta charset= "utf- 8"> 
< script type= "text/javascript"> 
function checkName () { 
Var username= document .getElementById ("name"); 
Var nameMsg= document .getElementById ("nameMsg"); 
if (username==null | username.value=="") 
return "isnull"; 
Jelse{ 
var pattern="^[a- zA- 2] [a- zA- 20- 9 @]{5,20}$"; 
var check= new RegExp (pattern); 
if(!check.test (username.value) ){ 
return "notmatch"; 
Jelse 


return "yes"; 


和 
function pwdCheck() {// 检 验 密码 
var pwd- document .getElementById ("pwd") ; 
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var pwdMsg= document .getElementById ("pwdMsg"); 
if (pwd.value==""|| pwd==nu11) { 

return false; 
Jelse{ 


return true; 


} 
function repwdcheck(){// 重 复 密码 检验 
var pwd= document .getElementById ("pwd") ; 
var repwd= document .getElementById ("repwd"); 
Var repwdMsg= document .getElementById ("repwdMsg"); 
if(repwd.value=="" | repwd==nu11) { 
return "isnull"; 
Jelse if (repwd.value!=pwd.value){ 
return "notmatch"; 
Jelse{ 


return "yes"; 


和 
function Checkl (){ 
Var username= document .getElementById ("name"); 
Var nameMsg= document .getElementById ("nameMsg"); 
if(checkName()=="isnull"){ 
nameMsg .innerHTMI= "< font color= 'red'> gnbsp;@__@ gnbsp; 用 户 名 不 能 为 空 ! 
</font>"; 
Jelse if (checkName ()== "notmatch") { 
nameMsg .innerHIMI= "< font color= 'red'> gnbsp;@__©、 snbsp; 对 不 起 ,用 户 名 只 能 为 6 
-20 位 的 数字 ,字母 ,下 画 线 _ 和 @ 符 号 组 成 ,并 且 只 能 以 英文 开头 !< /font>"; 
Jelse{ 
nameMsg .innerHTMI— "< font color= 'green'> gnbsp;0( 门 _ 门 )0 snbsp; 恭 喜 , 您 可 以 
使 用 该 用 户 名 !< /font>"; 
二 
function Check2(){ 
var pwd= document .getElementById ("pwd"); 
var pwdMsg= document .getElementById ("pwdMsg") ; 
if (pwdCheck ()) { 
pwdMsg. innerHTMI= ""; 
}else{ 
pwdMsg.innerHTMI 一 "< font color= 'red'> gnbsp;@@__、 gnbsp; 对 不 起 ,密码 不 能 为 
空 !</font> "7 
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function Check3(){ 
var pwd= document .getElementById ("pwd") ; 
var repwd= document .getElementById ("repwd") ; 
var repwdMsg= document .getElementById ("repwdMsg"); 
if( repwdCheck ()=="isnul1")1{ 
repwdMsg .innerHTMI= "< font color= 'red'> snbsp;@_@ gnbsp; 对 不 起 ,密码 不 能 
为 空 !< /font>"; 
jelse if (repwdCheck ()== "notmatch") { 
TepwdMsg.innerHTML= "< font color= 'red'> snbsp;@O_O@ gnbsp; 对 不 起 ,密码 不 一 
致 ,请 重新 输入 !< /font>"; 
Jelse{ 
repwdMsg.innerHTMI= "< font color= 'green'> gnbsp;0 (NN 站 )o snbsp; 蕉 喜 , 密 码 输 
人 一 致 !< /font>"; 
} 
了 
function Check5 (){ 
if (checkName()== "isnul1"){ 
alert ("用 户 名 不 能 为 空 1!"); 
return false; 
jelse if (checkName ()== "notmatch") { 
alert ("用 户 名 不 符合 要 求 ,请 重新 输入 !"); 
return false; 
Jelse if(!pwdcheck()){ 
alert ("密码 不 能 为 空 !") ; 
return false; 
jelse if (repwdCheck ()== "isnull1"){ 
alert ("再 次 输入 密码 框 不 能 为 空 !1"); 
return false; 
jelse if (repwdCheck ()== "notmatch") { 
alert ("两 次 输入 密码 不 一 致 !1") ; 
return false; 
lelse{ 


return true; 


k 

</script> 

</head> 

< form onsubmit= "return Check5 () ;"> 
用 户 名 :< input type= "text" id= "name" onchange= "Checkl () "> < span id= 
"nameMsg">< /span> <br> 
密码 :< input type= "password" id- "pwd" onchange= "Check2 () ">< span id- 
"pwdMsg">< /span> <br> 
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再 次 输入 密码 :< input type= "password" id="repwd" onchange= "Check3()"> 
< span id= "repwdMsg">< /span> <br><br> 
<input type= "submit" value= "创建 账号 "> 
</form> 
</html> 


步骤 2: 将 文件 保存 为 1. html。 
步骤 3: 在 浏览 器 中 预览 网 页 效果 。 
运行 效果 如 图 12-3 所 示 。 

















本 - 口 x 
/ 四 Thtml x 时 
© 3 © | file///D/code/1.html 安居 
用 户 名 :|henan 日 ”对 不 起 ， 用 户 名 只 能 为 6-20 位 的 数字 ， 字 母 ,下 面 
线 和 @ 符 号 组 成 ， 并 且 只 能 以 英文 开头 ! 
密码 ， 日 ”对 不 起 , 密码 不 能 为 宝 ! 
再 次 输入 密码 ， 
创建 帐号 











图 12-3 综合 实例 运行 效果 图 


12.6 本 章 小 结 


本 章 主要 讲解 了 JavaScript 的 面向 对 象 和 时 间 编 程 。 重 要 内 容 如 下 : 

(1) 内 置 对 象 。 内 置 对 象 主要 包含 了 字符 串 对 象 .数学 对 象 .日 期 对 象 . 数 组 对 象 、 布 
尔 对 象 。 

(2) 宿主 对 象 。 宿 主 对 象 主要 包含 了 DOM 对 象 . window 对 象 。 DOM 操作 都 比较 
简明 ,不 过 ,有 些 时 候 , 操 作 DOM 并 不 像 表 面 上 看 起 来 那么 简单 。 由 于 浏览 器 中 充斥 着 
隐藏 的 陷阱 和 不 兼容 问题 ,用 JavaScript 代码 处 理 DOM 的 某 些 部 分 更 复杂 一 些 。 

(3) 事件 编程 。 事 件 是 另 一 种 当 异 步 回调 完成 处 理 后 的 通讯 方式 。 一 个 对 象 可 以 成 
为 发 射 器 并 派发 事件 ,而 另外 的 对 象 则 监听 这 些 事件 。 
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本 章节 主要 介绍 HTML5 图 形 绘制 .本 地 存储 、 离 线 缓存 和 地 理 位 置 。 
本 章 重点 

。 掌握 使 用 canvas 进行 图 形 绘制 

。 了 解 本 地 存储 相关 技术 

。 了 解 地 理 位 置 相关 技术 


13.1 使 用 HTMLS 绘制 图 形 


canvas 元 素 是 HTML5 中 新 增 的 一 个 元 素 , 专 门 用 来 绘制 图 形 。 它 自己 没有 行为 ， 
但 却 把 一 个 绘图 API 展现 给 客户 端 JavaScript, 使 脚本 能 够 把 想 绘 制 的 东西 都 绘制 到 一 
块 画 布 上 。 在 页 面 上 放置 一 个 canvas 元 素 , 就 相当 于 在 页 面 上 放置 了 一 块 “ 画 布 ”, 可 以 
在 其 中 进行 图 形 的 绘制 。 

canvas 元 素 主要 包含 width 和 height 属性 ,分 别 标识 矩形 区 域 的 宽度 和 高 度 , 既 可 
以 通过 属性 定义 ,也 可 以 使 用 CSS 来 定义 ,如 例 13-1 所 示 。 


<!-- 例 13-1--> 
<html> 
<head> 
<title> 网 页 标题 < /title> 
<meta charset=utf- 8" /> 
</head> 
<body> 
< canvas id= "myCanvas" width= "400" height="300" /> 
</body> 
</html> 


在 上 面 的 示例 代码 中 ,用 id 表示 画布 对 象 名 称 , width 和 height 分 别 表示 宽度 和 高 
度 。 最 初 的 画布 是 不 可 见 的 ,为 了 便于 观察 ,可 以 通过 设置 它 的 样式 ,方便 在 页 面 查看 : 
<canvas id- "myCanvas" width= "400" height= "300" style- "border:lpx 


solid #000"> 


</canvas> 


运行 效果 如 图 13-1 所 示 。 
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图 13-1 ”绘制 矩形 


13.1.1 绘制 基本 图 形 


使 用 canvas 的 API 可 以 绘制 简单 的 矩形 ,还 可 以 绘制 一 些 其 他 的 常见 图 形 , 例 如 直 
线 、 圆 等 。 
在 绘制 图 形 之 前 ,需要 先 获 得 canvas 对 象 : 


Var canvas= document .getElementById ('myCanvas') 


然后 就 可 以 通过 canvas 对 象 所 提供 的 方法 进行 图 形 绘制 。 

canvas 对 象 提供 了 一 个 封装 了 很 多 绘图 功能 的 对 象 context, context 对 象 是 内 
建 的 HTML5 对 象 , 拥 有 绘制 路 径 、 和 矩形 、 圆 形 、 字 符 以 及 添加 图 像 的 方法 。 需 要 使 用 
canvas 对 象 的 getContext() 方 法 来 获取 它 。 

语法 形式 如 下 : 





Canvas .getContext (ContextID) 


参数 contextID 指定 了 想 要 在 画布 上 绘制 的 类 型 。 当 前 唯一 的 合法 值 是 2d, 它 指定 
了 二 维 绘图 ,这 个 方法 返回 一 个 环境 对 象 , 该 对 象 导 出 一 个 二 维 绘图 API。 

后 提 示 : 在 未 来 ,如 果 < 一 canvas 二 标签 扩展 到 支持 3D 绘图 ,getContext() 方 法 可 能 
允许 传递 一 个 3d 字符 串 参 数 。 

现在 ,获取 该 对 象 ,代码 如 下 : 


var context= canvas .getContext ('2d') 


当然 为 了 避免 部 分 浏览 器 不 支持 ,应 先 做 如 下 判断 : 


第 13 章 “HIMLS 高 级 应 用 \@®/ 


if (canvas.getContext && canvas.getContext ('2d')) 
var context= canvas.getContext ('2d'); 


之 后 就 可 以 通过 API 中 提供 的 方法 进行 绘制 了 。 
使 用 canvas 绘制 矩形 时 ,涉及 到 一 个 或 多 个 方法 ,这 些 方法 如 表 13-1 所 示 。 
表 13-1 绘制 矩形 的 方法 




















方 波 功 能 示 例 
filRectO) 绘制 一 个 矩形 ,这 个 矩形 区 域 没有 边框 ,只 有 填充 色 。| context. fillRect(x,y, width， 
该 方法 有 4 个 参数 ,分 别 代表 坐标 位 置 和 抢 形 的 大 小 heightb) ， 
ERect() 绘制 一 个 带 边框 的 矩形 。 该 方法 同样 具有 4 个 参数 , 功 | context. strokeRect (x，y， 
eV | 兹 同上 Width,beigh)’s 
clearRect() 清除 一 个 矩形 区 域 , 被 清除 的 区 域 将 没有 任何 线条 。 该 | context. clearRect ( x，y， 
方法 同样 具有 4 个 参数 ,功能 同上 width, height) ; 


现在 绘制 一 个 矩形 ,如 例 13-2 所 示 。 


基本 = 类 
< !DOCTYPE html> 
<html> 
<body> 
<canvas id= "myCanvas" width= "300" height= "200" style= "border:1px solid blue"> 
Your browser does not support the canvas element. 
</canvas> 
< script type= "text/javascript"> 
Var c= document .getElementById ("myCanvas"); 
Var cxt=c.getContext ("2d"); 
cxt.fillstyle= "rgb (0,0,200)"; 
cxt.fillRect (10, 20, 100, 100); 
</script> 
< /body> 
</html> 


上 面 代码 定义 了 一 个 画布 对 象 ,其 id 名 称 为 myCanvas ,高 度 和 宽度 都 为 500px, 并 
定义 了 画布 边框 的 显示 样式 。 代 码 中 首先 获取 画布 对 象 , 然 后 使 用 getContext 获取 当前 
2d 的 上 下 文 对 象 ,并 使 用 fillRect 绘制 一 个 矩形 。 其 中 涉及 到 一 个 fillStyle 属性 ， 
fillStyle 用 于 设置 填充 的 颜色 .透明 度 等 。 

运行 代码 ,可 以 看 到 ,在 网 页 中 canvas 标签 内 显示 了 一 个 蓝 色 和 矩形 ,如 图 13-2 所 示 。 

使 用 canvas 元 素 绘制 图 形 的 时 候 , 有 两 种 方式 : 填充 (fill) 与 绘制 边框 (stroke)。 在 
绘制 图 形 的 时 候 , 首 先 要 设 定好 绘图 的 样式 (style) .然后 调用 有 关 方 法 进行 图 形 的 绘制 。 

在 上 述 的 代码 中 ,获取 到 context 对 象 之 后 ,主要 对 以 下 属性 进行 了 设置 : 

(1) fillStyle 属性 : 填充 的 样式 ,在 该 属性 中 填 和 人 填充 的 颜色 值 。 

(2) strokeStyel: 图 形 边框 的 样式 。 在 该 属性 中 填 人 边框 的 颜色 值 。 

(3) linWidth: 设置 图 形 边框 的 宽度 。 
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图 13-2 ”绘制 矩形 
在 设置 完成 属性 后 ,分 别 使 用 fillRect 方法 与 strokeRect 方法 来 填充 矩形 和 绘制 矩 
形 边框 。 即 可 完成 绘制 图 形 。 
在 画布 中 绘制 图 形 ,可 能 要 涉及 的 方法 如 表 13-2 所 示 。 
表 13-2 绘制 图 形 的 方法 
方 法 功 能 





beginPath() 开始 绘制 路 径 





x 和 y 定 义 的 是 圆 的 圆 点 : radius 是 圆 的 半径 :; startAngle 和 
endAngle 是 弧度 ,不 是 度数 ;anticlockwise 用 来 定义 画 圆 的 方向 , 值 
为 true 或 false 


arc (x, y, radius, startAngle, 
endAngleanticlockeise) 














closePath() 结束 路 径 的 绘制 
filO 进行 填充 
strocke() 该 方法 设置 边框 





路 径 是 绘制 自 定义 图 形 的 好 方法 ,在 canvas 中 ,通过 beginPath() 方 法 开始 绘制 路 
径 , 这 个 时 候 , 就 可 以 绘制 直线 、 曲 线 等 ,绘制 完成 后 ,调用 fill 〇 和 strock() 完 成 填充 和 边 
框 设置 ,通过 closePath() 方 法 结束 路 径 的 绘制 ,如 例 13-3 所 示 。 


<!-- 例 13-3--> 
< !DOCTYPE html> 
<html> 
<body> 
< canvas id= "myCanvas" width= "200" height= "200" style= "border:1px solid blue"> 
Your browser does not support the canvas element. 
</canvas> 


< script type= "text/javascript"> 
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var c=document .getElementById ("myCanvas"); 
var cxt=c.getContext ("2d"); 
cxt.fillStyle="# FFaa00"; 
cxt .beginPath (); 
cxt.arc(70,18,15,0,Math.PI* 2,true); 
cxt.closePath (); 
cxt.fill(); 

</script> 
< /body> 
</html> 


在 上 面 的 JavaSctipt 代码 中 ,使 用 beginPath() 方 法 开启 一 个 路 径 ,然后 绘制 一 个 圆 
形 , 最 后 关闭 这 个 路 径 并 填充 。 运 行 效果 如 图 13-3 所 示 。 
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图 13-3 自 定义 图 形 


13.12 使 用 moveTo 与 lineTo 绘 制 直线 
绘制 直线 常用 的 方法 是 moveTo() 和 lineTo() ,其 含义 如 表 13-3 所 示 。 
表 13-3 绘制 直线 的 方法 和 属性 


方法 和 属性 功 能 


moveTo(x,y) 不 绘制 ,只 是 将 当前 位 置 移动 到 新 目标 坐标 (x,y) ,并 作为 线条 的 开始 点 


绘制 线条 到 指定 位 置 的 目标 坐标 (x,y) ,并 在 两 个 坐标 之 间 画 一 条 直线 。 不 管 调 
lineToCx,y) 用 它们 哪 一 个 ,都 不 会 真正 的 画 出 圆 形 ,因为 还 没有 调用 strock 和 fill 函数 。 当 
前 ,只 是 在 定义 路 径 的 位 置 ,以 便 后 面 绘制 时 调用 

strockStyle 指定 线条 的 颜色 

















lineWidth 设置 线条 的 粗细 
绘制 直线 如 例 13-4 所 示 。 








二 和 一 全 33- 条 :一 到 
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<body> 
<canvas id= "myCanvas" width= "200" height= "200" style= "border:1px solid blue"> 
Your browser does not support the canvas element. 
< /canvas> 
< script type= "text/javascript"> 
var c=document .getElementById ("myCanvas"); 
Var cxt=c.getContext ("2d"); 
cxt .beginPath(); 
cxt.strokestyle= "rgb (0,182,0)"; 
Cxt .moveTo (10,10); 
cxt.lineTo (150, 50); 
cxt.lineTo (10, 50); 
cxt.lineWidth=14; 
cxt.stroke(); 
cxt.closePath(); 
</script> 
< /body> 
</html> 


上 面 的 代码 中 ,使 用 moveTo() 方 法 定义 一 个 坐标 位 置 为 (10,10) ,然后 以 此 坐标 位 
置 为 起 点 ,绘制 了 两 个 不 同 直线 ,并 用 lineWidth 设置 了 直线 的 宽度 ,用 strockStyle 设置 
了 直线 的 颜色 ,用 lineTo() 设 置 了 两 个 不 同 直线 的 结束 位 置 。 

运行 效果 如 图 13-4 所 示 ,可 以 看 到 ,网 页 中 绘制 了 两 条 直线 ,这 两 条 直线 在 某 一 点 交叉 。 
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图 13-4 ”绘制 直线 
1313 使 用 bezierCuveTo 绘 制 贝 塞 尔 曲 线 


在 数学 的 数值 分 析 领 域 中 , 贝 塞 尔 (bezier) 曲 线 是 计算 机 图 形 学 中 相当 重要 的 参数 曲 
线 。 更 高 维度 的 广泛 化 贝 塞 尔 曲 线 就 称 作 贝 塞 尔 曲面 ,其 中 贝 塞 尔 三 角 是 一 种 特殊 的 
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实例 。 

bezierCurveTo () 方 法 表示 为 一 个 画布 的 当前 子路 径 添加 一 条 三 次 贝 塞 尔 曲线 ,这 条 曲 
线 的 开始 点 是 画布 的 当前 点 ,而 结束 点 是 (x,y)。 两 条 贝 塞 尔 曲 线 的 控制 点 (cpX1,cpY1) 和 
(cpX2,cpY2) 定 义 了 曲线 的 形状 。 当 这 个 方法 返回 的 时 候 , 当 前 的 位 置 为 (x,y) 。 

方法 bezierCurveTo() 的 具体 格式 如 下 : 

bezierCurveTo (cpX]1, cpYl, cpX2, cpY2, x, y) 

其 参数 的 含义 如 表 13-4 所 示 。 

表 13-4 贝 塞 尔 曲线 














参 数 描 述 

cpX1,xpY1 与 曲线 的 开始 点 (当前 位 置 ) 相 关联 的 控制 点 的 坐标 
cpX2, xpY2 与 曲线 的 结束 点 相关 联 的 控制 点 的 坐标 

xy 曲线 的 结束 点 的 坐标 





应 用 如 例 13-5 所 示 。 


二 本 = 本 13-5= = 

< !DOCTYPE html> 

<html> 

<head> 
<title> 贝 塞 尔 曲线 < /title> 
<script> 
function draw (id) 
{ 

var canvas= document .getElementById (id); 
if(canvas==null) 
return false; 
Var context= canvas.getContext ('2d'); 
context .fillStyle="#eeeeff"; 
context .fillRect (0, 0, 400, 300); 
Var n=0; 
Var dx=150; 
var dy=150; 
Var s=100; 
context .beginPath (); 
context .globalCompositeOperation= 'and'; 
context.fillstyle= 'rgb (100, 255, 100) '; 
context .strokeStyle= "rgb (0,0,100) "7 
var x=Math.sin(0); 
var y=Math.cos (0); 
var dig=Math.PI/15* 11; 


for (var i=0;i<30;i++) 
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var x=Math.sin(i* dig); 
var y=Math.cos (i* dig); 
context .bezierCurveTo( 
dxtxx s,dyty* s-100,dxtx* st100,dyty* s,dxtx* s,dyt y* 3); 
} 
context.closePath(); 
context .fil]l (); 
context .stroke(); 
h 
</script> 
</head> 
<body onload= "draw ('canvas');"> 
<hl> 绘 制 元 素 < /hl> 
<canvas id= "canvas" width= "400" height= "300" /> 
< /body> 
</htm> 


在 上 面 的 draw 函数 代码 中 ,首先 使 用 fillRect(0,0,400,300) 语 句 绘制 了 一 个 矩形 ， 
其 大 小 与 画布 相同 ,填充 颜色 为 浅 青色 。 然 后 定义 了 几 个 变量 ,用 于 设 定 曲线 坐标 位 置 ， 
在 for 循环 中 使 用 bezierCurveTo() 绘 制 贝 塞 尔 曲 线 。 运 行 效果 如 图 13-5 所 示 , 可 以 看 
到 ,网 页 中 显示 了 贝 塞 尔 曲线 。 


中 由 济 埃 曲 线 
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绘制 元 素 

















图 13-5 贝 塞 尔 曲 线 





13.14 绘制 渐变 图 形 
渐变 是 两 种 或 更 多 颜色 的 平滑 过 渡 ,是 指 在 颜色 集 上 使 用 逐步 抽样 算法 ,并 将 结果 用 
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与 描述 样式 和 填充 样式 中 。canvas 的 绘制 图 上 下 文 支持 两 种 类 型 的 渐变 : 线性 变化 和 放 
射 性 渐变 ,其 中 ,放射 性 渐变 也 称 为 径 向 渐变 。 

1. 绘制 线性 渐变 

创建 一 个 简单 的 渐变 非常 容易 。 使 用 渐变 需要 三 个 步骤 。 

步骤 一 ,创建 渐变 对 象 : 


var gradient= cxt.createLinearGradient (0,0,canvas.height); 
步骤 二 ,为 渐变 对 象 设置 颜色 ,指明 过 渡 方 式 : 


gradient .addColorSstop (0, '#f£ff"); 
gradient .addColorstop (1, "#000°"); 


步骤 三 ,在 context 上 为 填充 样式 或 者 描 边 样 式 设置 渐变 : 
cxt .fillStyle= gradient; 
要 设置 显示 颜色 ,在 渐变 对 象 上 使 用 addColorStop() 函数 即 可 。 除 了 可 以 变换 成 其 
他 颜色 外 ,还 可 以 为 颜色 设置 alpha 值 , 并 且 alpha 值 也 是 可 以 变化 的 。 要 达到 这 样 的 效 
果 ,需要 使 用 颜色 值 的 另 一 种 表示 方法 ,例如 内 置 alpha 组 件 的 CSSrgba() 函数 。 绘 制 线 
性 渐变 时 ,会 使 用 如 表 13-5 所 示 的 一 些 方法 。 
表 13-5 绘制 线性 渐变 的 方法 





方法 功 能 
允许 指定 两 个 参数 : 颜色 和 偏 移 量 。 颜 色 参 数 是 指 开 发 人 员 
addColorStop() 希望 在 偏 移 位 置 描 边 或 填充 时 所 使 用 的 颜色 。 偏 移 量 是 一 


个 0.0~1.0 之 间 的 数值 , 带 表演 者 渐变 线 渐变 的 距离 有 多 远 
createLinearGradient(x0,y0,xl,y1); | 沿 着 直线 从 (x0,y0) 至 (xl,yl) 绘 制 渐变 








应 用 如 例 13-6 所 示 。 


<!-- 例 13-6--> 
< IDOCTYPE html> 
<html> 
<head> 
<title> 线 性 渐变 < /title> 
</head> 
<body> 
<hl> 绘 制 线性 渐变 < /hl> 
<canvas id= "canvas" width= "400" height="300" style= "border:lpx solid red"/></ 
Canvas> 
< script type= "text/javascript"> 
var c=document .getElementById ("canvas") ; 
var cxt=c.getContext ("2d"); 
var gradient=cxt .createLinearGradient (0, 0,0,canvas.height); 
gradient .addColorstop (0, '#fff"); 
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gradient .addColorstop (1, #000"); 
cxt.fillstyle= gradient; 
cxt.fillRect (0,0, 400, 400); 
</script> 
< /body> 
</html> 
上 面 的 代码 使 用 2D 环境 对 象 产生 了 一 个 线性 渐变 对 象 ,渐变 的 起 始点 是 (0,0) , 渐 
变 的 结束 点 是 (0,canvas. height) ,然后 使 用 addColorStop() 函 数 设 置 渐 变 颜 色 , 最 后 将 渐 
变 填充 到 上 下 文 环 境 的 样式 中 。 
运行 效果 图 如 图 13-6 所 示 ,可 以 看 到 ,在 网 页 中 创建 了 一 个 垂直 方向 上 的 渐变 ,从 上 
到 下 颜色 之 间 变 深 。 














口 线性 渐变 
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绘制 线性 渐变 





图 13-6 ”线性 渐变 


2. 绘制 径 向 渐变 

径 向 渐变 即 放 射 性 渐变 。 所 谓 放 射 性 渐变 ,就 是 颜色 会 介 于 两 个 指定 圆 之 间 的 雏形 
区 域 平 滑 变化 。 放 射 性 渐变 与 线性 渐变 使 用 的 颜色 终止 点 是 一 样 的 。 如 果 要 实现 放射 线 
渐变 , 即 径 向 渐变 ,需要 使 用 createRadialGradient() 方 法 。 

createRadialGradient(x0,y0,r0,xl,yl,r1) 方 法 表示 沿 着 两 个 圆 之 间 的 锥 面 绘制 渐 
变 。 其 中 前 三 个 参数 代表 开始 的 圆 ,圆心 为 (x0,y0) ,半径 为 r0。 后 三 个 参数 代表 结束 的 
圆 , 圆 心 为 (x1,y1) ,半径 为 rl。 

应 用 如 例 13-7 所 示 。 


<!-- 例 13-7--> 
< IDOCTYPE html> 
<html> 
<head> 
<title> 径 向 渐变 < /title> 
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</head> 
<body> 
<hl> 绘 制 径 向 渐变 < /hl> 
<canvas id= "canvas" width= "400" height="300" style= "border:lpx solid red"/></ 
Canvas> 
<script type= "text/javascript"> 
var c=document .getElementById ("canvas"); 
var cxt=c.getContext ("2d"); 
var gradient= cxt .createRadialGradient ( 
canvas.width/2, canvas.height/2,0, canvas.width/2,canvas.height/2,150); 
gradient.addcolorStop (0, '# fff"'); 
gradient.addcolorStop (1, '# 000'); 
cxt.fillstyle=gradient; 
cxt.fillRect (0, 0, 400, 400); 


</script> 
< /body> 
</html> 
在 上 面 的 代码 中 ,首先 创建 渐变 对 象 gradient, 使 用 createRadialGradient() 方 法 创建 
-个 径 向 渐变 ,然后 使 用 addColorStop() 添 加 颜色 ,最 后 将 渐变 填充 到 上 下 文 环 境 中 。 





运行 效果 如 图 13-7 所 示 ,可 以 看 到 ,在 网 页 中 ,从 圆 的 中 心 亮 
形成 了 一 个 径 向 渐变 。 


点 开始 ,向 外 逐步 发 散 ， 
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图 13-7 径 向 渐变 示例 


画布 canvas 不 但 可 以 使 用 moveTo() 这 样 的 方法 来 移动 画笔 ,来 绘制 图 形 和 线条 ,还 
可 以 使 用 平移 、 缩 放 和 旋转 来 调整 画笔 下 的 画布 。 
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13.15 绘制 平移 效果 的 图 形 


如 果 要 对 图 形 实现 平移 ,需要 使 用 translate(x,y) 方 法 ,该 方法 表示 在 平面 上 平移 , 即 
原来 原点 为 参考 系 , 然 后 以 偏 移 后 的 位 置 作为 坐标 原点 。 也 就 是 说 ,原来 在 (100,100) , 然 
后 translate(1,1) ,新 的 坐标 原点 在 (101.101) 而 不 是 (1,1)。 

应 用 如 例 13-8 所 示 。 


<!-- 例 13-8=-> 
< !DOCTYPE html> 


<html> 
<head> 
<title> 绘 制 坐 标 变换 < /title> 
<script> 
function draw (id) 
{ 
var canvas= document .getElementById (id); 
if(canvas==null) 
return false; 
Var context= canvas.getContext ('2d'); 
context .fillStyle="#eeeeff"; 
Context .fillRect (0, 0, 400, 300); 
context .translate (200, 50); 
context .fillSstyle= 'rgba (255, 0,0,0.25) "7 
for(var i=0;i<50;i++){ 
context .translate (25,25); 
context .fillRect (0, 0,100, 50); 
} 
} 
</script> 
</head> 
<body onload= "draw ('canvas');"> 
<hl> 变 换 原 点 坐标 < /hl> 
<canvas id= "canvas" width= "400" height= "300" />< /canvas> 
</body> 
</html> 


在 draw() 函 数 中 ,使 用 fillRect() 方 法 绘制 了 一 个 矩形 ,然后 使 用 translate() 方 法 平 
移 到 一 个 新 的 位 置 ,从 新 的 位 置 开始 ,使 用 for 循环 ,连续 移动 多 次 坐标 原点 , 即 多 次 绘制 
和 矩形。 运行 效果 如 图 13-8 所 示 , 可 以 看 到 ,在 网 页 中 ,从 坐标 位 置 (200,50) 开 始 绘制 矩 
形 , 并 以 每 次 指定 的 平移 距离 绘制 矩形 。 


13.16 绘制 缩放 效果 的 图 形 
对 于 变形 图 形 来 说 ,其 中 最 常用 的 方式 就 是 对 图 形 进行 缩放 , 即 以 原来 的 图 形 为 参 
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癌 给 市 坐标 到 换 
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变换 原点 坐标 





图 13-8 ”变换 原点 坐标 示例 


车, 放大 或 者 缩小 图 形 , 从 而 达到 效果 。 

如 果 要 实现 图 形 缩放 ,需要 使 用 scale(x,y) 函 数 , 该 函数 带 有 两 个 参数 ,分 别 代 表 x、 
y 两 个 方向 上 的 值 。 每 个 参数 在 canvas 显示 图 像 的 时 候 ,向 其 传递 在 本 方向 轴 上 图 像 要 
放大 (或 者 缩小 ) 的 量 。 如 果 x 的 值 为 2, 就 代表 所 绘制 的 图 像 中 全 部 都 会 变 成 两 倍 宽 。 
如 果 y 的 值 为 0. 5 ,绘制 出 来 的 图 像 全 部 元 素 都 会 变 成 先前 的 一 半 高 。 

应 用 如 例 13-9 所 示 。 


<!-- 例 13-9--> 
< !DOCTYPE html> 
<html> 
<head> 
<title> 绘 制图 形 缩放 < /title> 
<script> 
function draw (id) 
{ 
var canvas= document .getElementById (id); 
if (canvas==nul1) 
return false; 
var context= canvas.getContext ('2d'); 
context .fillStyle= "# eeeeff"; 
context.fillRect (0, 0, 400, 300); 
context.translate (200, 50); 
context.fillstyle= "rgba(255,0,0,0-25) "7 
for (var i=0;i<50;i++){ 


context .scale (3,0.5); 
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context .fillRect (0,0,100, 50); 
} 
} 
</script> 
</head> 
<body onload= "draw ('canvas');"> 
<hl> 图 形 缩放 < /hl> 
<canvas id= "canvas" width= "400" height= "300" /> 
</body> 
</htm> 


在 上 面 的 代码 中 ,缩放 的 操作 是 在 for 循环 中 完成 的 ,在 该 循环 中 ,以 原来 图 形 为 参 
考 物 ,使 其 在 x 轴 方 向 增加 3 倍 宽 ,y 轴 方 向 上 变 为 原来 的 一 半 。 
运行 效果 如 图 13-9 所 示 ,可 以 看 到 ,在 一 个 指定 方向 上 绘制 了 多 个 矩形 。 


口 过 制图 形 缩放 
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图 形 缩放 





图 13-9 图 形 缩放 示例 


13.17 绘制 旋转 效果 的 图 形 


变换 操作 并 不 限于 平移 和 缩放 ,还 可 以 使 用 函数 context. rotate(angle) 来 旋转 图 像 ， 
甚至 可 以 直接 修改 底层 变换 以 完成 一 些 高 级 操作 ,如 剪裁 图 像 的 绘制 路 径 。 

例如 ,context. rotate(1. 57) 表 示 旋 转角 度 参数 以 弧度 为 单位 。rotate() 方 法 默认 地 
从 左上 端的 (0,0) 开 始 旋转 ,通过 指定 一 个 角度 ,改变 了 画布 坐标 和 Web 浏览 器 中 的 
去 canvas 盖 元 素 的 像素 之 间 的 映射 ,使 得 任意 后 续 绘 图 在 画布 中 都 显示 为 旋转 的 。 

应 用 如 例 13-10 所 示 。 


<!-- 例 13-10--> 
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< IDOCTYPE html> 


<html> 
<head> 
<title> 绘 制 旋转 图 像 < /title> 
<script> 
function draw (id) 
{ 
Var canvas= document .getElementById (id); 
if (canvas==null) 
return false; 
var context= canvas.getContext ('2d'); 
context .fillStyle= "#eeeeff"; 
context .fillRect (0, 0, 400, 300); 
context .translate (200, 50); 
context .fillStyle= 'rgba(255,0,0,0.25) "7 
for(var i=0;i<50;i++){ 
context .rotate (Math.PI/10); 
context .fillRect (0,0,100, 50); 
} 
} 
</script> 
< /head> 
<body onload= "draw ('canvas');"> 
<hl> 旋 转 图 形 < /hl> 
<canvas id= "canvas" width= "400" height= "300" /> 
</body> 
</html> 
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在 上 面 的 代码 中 ,使 用 rotate() 方 法 ,在 for 循环 中 对 多 个 图 形 进 行 了 旋转 ,其 旋转 角 


度 相同 。 运 行 效 果 如 图 13-10 所 示 , 在 显示 页 面 上 ,多 个 矩形 以 中 心 弧度 为 原点 进行 了 
旋转 。 


9 注意; 这 个 操作 并 没有 旋转 一 canvas>> 元 素 本 身 。 而 且 , 旋 转 的 角度 是 用 弧度 指 


定 的 。 


13.18 绘制 组 合 效 果 的 图 形 


在 前 面 介 绍 的 知识 中 ,可 以 将 一 个 图 形 绘制 在 另 一 个 之 上 。 大 多 数 情况 下 ,这 样 是 不 


globalCompositeOperation=type 


够 的 。 例 如 ,这 样 会 受制 于 图 形 的 绘制 顺序 。 不 过 ,可 以 利用 globalCompositeOperation 
属性 来 改变 这 些 方法 ,这 样 不 仅 可 以 在 已 有 图 形 后 面 再 绘制 新 图 形 , 还 可 以 用 来 遮盖 , 清 
除 ( 比 clearRect 方法 强劲 得 多 ) 某 些 区 域 。 其 语法 格式 如 下 所 示 : 





Te 
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癌 给 旋转 图 像 
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旋转 图 形 


这 表示 设置 不 同形 状 的 组 合 类 型 ,其 中 type 表示 方 的 图 形 是 已 经 存在 的 canvas 内 容 ， 





图 13-10 旋转 图 形 示 例 


圆 的 图 形 是 新 的 形状 ,其 默认 值 为 source_over, 表 示 在 canvas 内 容 上 面 绘制 新 的 形状 。 
type 具有 12 个 属性 值 , 具 体 说 明 如 表 13-6 所 示 。 


属 性 值 


表 13-6 type 的 属性 值 
说 有明 





source-over( default) 


这 是 默认 设置 ,新 图 形 覆 盖 在 原 有 内 容 之 上 





destination-over 


在 原 有 内 容 之 下 绘制 新 图 形 





source-in 


新 图 形 仅仅 出 现在 与 原 有 内 容重 全 的 部 分 ,其 他 区 域 都 变 成 透明 的 





destination-in 


原 有 内 容 中 与 新 图 形 重合 的 部 分 会 被 保留 ,其 他 区 域 都 变 成 透明 的 





source-out 


结果 是 只 有 新 图 形 与 原 有 内 容 不 重 倒 的 部 分 会 被 绘制 出 来 





destination-out 


原 有 内 容 中 与 新 图 形 不 重 伙 的 部 分 会 被 保留 





source-atop 


原 有 内 容 中 与 新 内 容重 一 会 被 绘制 ,并 覆盖 于 原来 有 内 容 之 上 





destination-atop 


原 有 内 容 中 与 新 内 容重 一 部 分 会 被 保留 ,并 在 原 有 内 容 之 下 绘制 新 图 形 














lighter 两 图 形 中 重 全 部 分 做 加 色 处 理 
darker 两 图 形 中 重 从 部 分 做 减 色 处 理 

xor 重 释 的 部 分 变 成 透明 

copy 只 有 新 图 形 被 保留 ,其 他 都 被 清除 掉 








应 用 如 例 13-11 所 示 。 


< 上 -- 例 13-11--> 
< !DOCTYPE html> 
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<html> 
<head> 
<title> 绘 制图 形 组 合 < /title> 
<script> 
function draw (id) 
{ 
Var canvas= document .getElementById (id); 
if(canvas==null) 
return false; 
var context= canvas.getContext ('2d'); 
var oprtns=new Array( 
"source- atop", 
"source- in", 
"source- out", 
"source- over", 
"destination- atop", 
"destination- in", 
"destination- out", 
"destination- over", 
"lighter", 
"copy", 
"xor™ 
) 7 
var i=10; 
context .fillstyle= "blue"; 
context .fillRect (10, 10, 60, 60); 
context .globalCompositeOperation=oprtns [i]; 
context .beginPath(); 
context .fillstyle= "red"; 
context .arc (60, 60, 30, 0, Math .PI * 2, false); 
context .fill(); 
} 
</script> 
< /head> 
<body onload= "draw ('canvas');"> 
<hl> 图 形 组 合 < /hl> 
<canvas id= "canvas" width= "400" height= "300" /> 
</body> 
</html> 


在 上 面 代码 中 ,首先 创建 一 个 oprtns 数组 ,用 于 存储 type 的 12 个 值 ,然后 绘制 了 一 


个 矩形 ,并 使 用 arc 绘制 一 张 图 。 
运行 效果 如 图 13-11 所 示 ,在 显示 页 面 上 绘制 了 一 个 矩形 和 圆 ,但 矩形 和 圆 重 番 的 地 
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方 以 空白 显示 。 


D 绘 刺 图 形 组 合 
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图 形 组 合 





图 13-11 图 形 组 合 


13.19 绘制 带 阴影 的 图 形 


在 画布 canvas 上 绘制 带 有 阴影 效果 的 图 形 非常 简单 ,只 需 设 置 几 个 属性 即 可 。 这 些 
属性 分 别 为 shadowOffsetX shadowOffsetY shadowBlur 和 shadowColor。 

属性 shadowColor 表示 阴影 的 颜色 ,其 值 与 CSS 颜色 一 致 。shadowBlur 表示 设置 
阴影 模糊 程度 ,此 值 越 大 ,阴影 越 模糊 。shadowOffsetX 和 shadowOffsetY 属性 表示 阴影 
的 x 和 y 偏 移 量 ,单位 是 像素 。 

应 用 如 例 13-12 所 示 。 


<!-- 例 13-12--> 
< !DocTYPE html> 
<html> 
<head> 
<title> 绘 制 阴影 效果 图 形 < /title> 
</head> 
<body> 
< canvas id="my_canvas" width="200" height="200" style="border:1lpx solid # 
££0000"> < /canvas> 
< script type= "text/javascript"> 
var elem= document .getElementById ("my _canvas"); 
if (elem sg elem.getContext) { 
var context=elem-getContext ("2d"); 


//shadowoffsetx 和 shadowoffsetY 阴影 的 x 和 y 偏 移 量 ,单位 是 像素 
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Context.shadowOffsetX=-157 
context .shadowOffsetY=15; 
//hadowBlur 设置 阴影 模糊 程度 。 此 值 越 大 ,阴影 越 模糊 


context .shadowBlur =10; 
//shadowcolor 阴影 颜色 
//context.shadowColor ='rgba(255, 0, 0, 0.5)'; 


Context .shadowColor= '# £00"'; 
context .fillStyle 三 "#00f"; 
context.fillRect (20, 20, 150, 100); 
} 
</script> 
< /body> 
</html> 


运行 效果 如 图 13-12 所 示 ,在 显示 页 面 上 显示 了 一 个 蓝 色 质 形 , 其 阴影 为 红色 矩形。 


癌 状 制 阴影 效果 图 形 
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图 13-12 ” 带 阴 影 的 图 形 


13.110 使 用 图 像 


画布 canvas 有 一 项 功能 就 是 可 以 引入 图 像 , 用 于 图 片 合 成 或 者 制作 背景 等 。 但 目前 
仅 可 以 在 图 像 中 加 入 文字 。 只 要 是 Geck 支持 的 图 像 ( 如 PNG、GIF、JPEG 等 ) 都 可 以 引 
人 到 canvas 中 ,而 且 其 他 的 canvas 元 素 也 可 以 作为 图 像 的 来 源 。 

要 在 画布 canvas 上 绘制 图 像 ,需要 先 有 一 张 图 片 。 这 个 图 片 可 以 是 已 经 存在 的 
二 img 记 元 素 ,或 者 通过 JS 创建 。 

无 论 采 用 哪 种 方式 ,都 需要 在 绘制 canvas 之 前 完全 加 载 这 张 图 片 。 浏 览 器 通常 会 在 
页 面 脚本 执行 的 同时 异步 加 载 图 片 。 如 果 视 图 在 图 片 未 加 载 之 前 就 将 其 呈现 在 canvas 
上 ,那么 canvas 将 不 会 显示 任何 图 片 。 
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捕获 和 绘制 图 像 完 全 是 可 以 通过 drawImage() 方 法 完成 的 , 它 可 以 接收 不 同 的 
HMLILT 参数 ,具体 含义 如 表 13-7 所 示 。 


表 13-7 绘制 图 像 的 方法 

















方法 说 明 
Ee ee 接收 一 个 图 片 ,并 将 其 绘制 到 canvas 中 。 坐 标 (dx，dy) 代 表 图 片 
的 左上 角 位 置 
drawImage (image, dx, dy, dw，| 接收 一 个 图 片 ,将 其 缩放 为 宽度 dw 和 高 度 dh, 然 后 把 它 画 到 
dh) canvas 上 的 (dx,dy) 位 置 
drawImage (image，sx，sy，sw，| 接收 一 个 图 片 ,通过 参数 (sx,sy,sw,sh) 指 定 图 片 剪裁 的 范围 , 缩 
sh,dx,dy,dw,dh) 放 到 (dw,dh) 大 小 ,最 后 把 它 绘制 到 canvas 上 的 (dx,dy) 处 
应 用 如 例 13-13 所 示 。 
< 上 二 - 例 13-13--> 
< !DOCTYPE html> 
<html> 
<head><title> 绘 制图 像 < /title>< /head> 
<body> 
<canvas id= "canvas" width= "300" height= "200" style= "border:1px solid blue"> 
Your browser does not support the canvas element. 
</canvas> 
< script type= "text/javascript"> 
window.onload= function (){ 
Var ctx= document .getElementById ("canvas") .getContext ("2d"); 
var img=new Image(); 
img.src="01.jpg"; 
img.onload= function (){ 
ctx.drawImage (img, 0,0); 
} 
} 
</script> 
< /body> 
</html> 


在 上 面 的 代码 中 ,使 用 窗口 的 onload 加 载 事件 , 即 在 页 面 被 加 载 时 执行 函数 。 在 函 
数 中 ,创建 上 下 文 对 象 ctx, 并 创建 Image 对 象 img; 然 后 使 用 img 对 象 的 src 属性 设置 图 
片 来 源 ,最 后 使 用 drawImage 画 出 当前 的 图 像 。 

运行 效果 如 图 13-13 所 示 ,页 面 上 绘制 了 一 个 图 像 ,并 且 在 画布 中 显示 。 
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图 13-13 使 用 图 像 


13.2 本 地 存储 


在 本 节 中 ,将 介绍 HTML5 中 与 本 地 存储 相关 的 两 个 内 容 一 一 Web 存储 与 本 地 数据 
库 。 其 中 ,Web 存储 机 制 是 对 存储 机 制 的 一 个 很 大 的 改善 。 原 先 的 Cookies 存储 有 很 多 
的 缺陷 , HTML5 不 再 使 用 它 , 转 而 使 用 改良 后 的 Web 存储 机 制 。 本 地 数据 库 是 
HTML5 新 增 的 一 个 功能 ,使 用 它 可 以 在 客户 端 本 地 建立 一 个 数据 库 , 原 本 必须 要 保存 在 
服务 器 端 数据 库 中 的 内 容 现在 可 以 直接 保存 在 客户 端 了 ,这 大 大 减轻 了 服务 器 端的 负担 ， 
同时 也 加 快 了 访问 数据 的 速度 。 


1321 Web 存储 


Web 存储 (Web storage) 是 HTML5 另 一 个 新 增 的 非常 重要 的 元 素 , 可 以 实现 将 页 
面 上 的 数据 进行 本 地 存储 ,并 能 读 取 存 储 的 数据 并 显示 在 页 面 上 ,主要 有 localStorage 和 
sessionStorage 两 个 对 象 。 

。 localStorage: 没有 时 间 限 制 的 数据 存储 。 

。 sessionStorage: 针对 一 个 session 的 数据 存储 。 

在 使 用 Web 存储 前 ,应 检查 浏览 器 是 否 支持 localStorage 和 sessionStorage, 格 式 
如 下 : 


if (typeof (Storage) !== "undefined") 
* 
//Yes! localStorage and sessionStorage support! 


//Some code..... 
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else 
{ 

//Sorry! No web storage support.. 
} 


判断 成 功 支持 后 ,再 使 用 该 对 象 进行 存储 。 
localStorage 对 象 存储 的 数据 没有 时 间 限 制 。 第 二 天 、 第 二 周 或 下 一 年 之 后 ,数据 依 
然 可 用 。 可 以 通过 一 个 示例 来 认识 它 ,代码 如 下 : 


localSstorage.lastname= "Smith"; 
document .getElementById ("result") .innerHTMI= "Last name: " 


+localStorage.lastname; 


上 述 代 码 使 用 key 二 "lastname" 和 value 二 "Smith" 创 建 一 个 localStorage 键 / 值 对 ， 
以 检索 键 值 为 "lastname" 的 值 .然后 将 数据 插入 id= "result" 的 元 素 中 。 

全 提示 : 键 / 值 对 通常 以 字符 串 存 储 ,你 可 以 按 自己 的 需要 转换 该 格式 。 

下 面 示 例 展 示 了 用 户 单 击 按钮 的 次 数 ,代码 中 的 字符 串 值 转换 为 数字 类 型 : 

if (localStorage.clickcount) 


{ 
localStorage.clickcount= Number (localStorage.clickcount)+1; 


localStorage.clickcount=1; 
} 
document .getElementById ("result") .innerHTML= "You have clicked the button "+ localStorage. 


clickcount+ "time (3) . "7 


sessionStorage() 方 法 针对 一 个 session 进行 数据 存储 。 当 用 户 关闭 浏览 器 窗口 后 ， 
数据 会 被 删除 ,代码 如 下 : 
if (sessionStorage.clickcount) 


{ 
sessionstorage.clickcount=Number (sessionStorage.clickcount)+1; 


sessionstorage.clickcount=1; 
} 
document. getElementById (" result "). innerHIML =" You have clicked the button "+ 


sessionStorage.clickcount+ " time (s) in this session."; 


下 面 通过 一 个 简单 的 小 程序 ,来 了 解 localStorage 和 sessionStorage 的 区 别 。 
应 用 如 例 13-14 所 示 。 
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Fae, kl 
< !DOCTYPE HTML> 
<html> 
<head> 
<meta charset= "utf- 8" /> 
<title> HTML5 Web Storage Demo< /title> 
< script type= "text/javascript"> 
function $ (id) { return document .getElementById (id) ;} 
function savesessionStorage (id) {sessionStorage.setItem('message',$ (id) .value) ;} 
function loadsessionStorage (id) {$ (id) . innerHTML= sessionStorage. getItem (" 
message");} 
function savelocalStorage (id) {localStorage.setItem("message", $ (id) .value);} 
function loadlocalStorage (id) {$(id). innerHIML = localStorage. getItem (" 
message");} 
</script> 
< /head> 
<body> 
<div> 
<h2> sessionStorage Demo< /h2> 
<p id= "sessionMsg"> < /p> 
<input type= "text" id="sessionInput" /> 
<input type= "button" value= "保存 数据 " onclick= "savesessionStorage 
('sessionInput');" /> 
<input type= "button" value= " 读 取 数据 " onclick= "loadsessionstorage 
('sessionMsg');" /> 
<br /> 
<h2> localStorage Demo< /h2> 
<P id= "LocalMsg"> < /p> 
<input type= "text" id= "localInput" /> 
< input type =" button"” value =" 保存 数 据 " onclick =" savelocalStorage 
('localInput');" /> 
< input type =" button" value =" 读 取 数 据 " onclick ="”1loadlocalStorage 
('localMsg');" /> 
</div> 
< /body> 
</html> 


1322 使 用 本 地 数据 库 进 行 本 地 存储 


在 HTML5 中 内 置 了 两 种 本 地 数据 库 , 一 种 是 SQLLite, 可 以 通过 SQL 语言 来 访问 
文件 型 SQL 数据 库 ; 另 外 一 种 是 称 为 indexDB 的 NoSQL 类 型 的 数据 库 。 

对 于 SQLLite 离线 数据 库 ,W3C 的 WebDatabase 规范 声明 不 再 维护 它 了 ,取而代之 
的 是 indexedDB, 因 此 本 书 不 再 讲述 ,读者 知道 有 该 数据 库 即 可 。 
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indexedDB 对 创建 具有 本 地 存储 数据 的 离线 HTML5 Web 应 用 程序 很 有 用 。 同 时 
它 还 有 助 于 本 地 缓存 数据 ,使 在 线 Web 应 用 程序 (比如 移动 Web 应 用 程序 ) 能 够 更 快 地 
运行 和 响应 。 接 下 来 将 介绍 如 何 操作 indexedDB 数据 库 。 

在 使 用 indexDB 数据 库 时 ,应 首先 连接 某 个 indexedDB 数据 库 , 可 以 通过 open() 方 
法 打开 一 个 数据 库 : 


var object= indexedDB .open (dbName,dbVersion) 


主要 有 两 个 参数 ,第 一 个 参数 为 一 个 字符 串 ,代表 数 据 库 名 ;第 二 个 参数 值 为 一 个 无 
符号 长 整 型 数值 ,代表 数据 库 的 版 本 号 。open() 方 法 会 返回 一 个 IDBOpenDBRequers 对 
象 ,代表 一 个 请 求 连接 数据 库 的 请 求 对 象 。 

下 面 先 连接 一 个 indexDB 数据 库 , 如 例 13-15 所 示 。 


<!-- 例 13-15--> 
< !DOCTYPE html> 
<html lang= "en"> 
<head> 
<meta charset= "UTF- 8"> 
<title> 连 接 indexDB 数据 库 < /title> 
<script> 
window. indexedDB=window. indexedDB | window.mozIndexedDB | window. 
webkitIndexedDB | window.msIndexedDB; 
window.IDBTransaction= window.IDBTransaction | window. 
webkitIDBTransaction || window.msIDBTransaction; 
window.IDBKeyRange= window.IDBKeyRange || window.webkitIDBKeyRange | 
window.msIDBKeyRange; 
window.IDBCursor= window.IDBCursor || window.webkitIDBCursor | 
window.msIDBCursor; 


function connectDatabase() { 


var dbName= 'indexedDBTest'7 // 数 据 库 名 
var dbVersion= 20160514; // 版 本 号 
var idb; 


var dbConnect= indexedDB .open (dbName, dbVersion); 
dbConnect.onsuccess= function(e){ ”// 连 接 成 功 
idb=e.target.result; 
alert ("数据 库 连 接 成 功 '); 
] 7 
dbConnect .onerror= function (){ 


alert ("数据 库 连 接 失 败 '); 


} 
</script> 
</head> 
<body> 
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< input type= "button" value= "连接 数据 库 " onclick= "connectDatabase () ;"> 


</body> 
</html> 
上 述 代码 先 使 用 open() 方 法 连接 数据 库 , 然 后 使 用 IDBOpenDBRequers 对 象 的 
onsuccess 事件 与 onerror 事件 来 分 别 定 义 数据 库 连 接 成 功 时 与 数据 库 连 接 失 败 时 所 需 


执行 的 事件 处 理 函 数 。 
运行 上 面 示例 代码 , 单 击 “连接 数据 库 ” 按 钮 ,连接 成 功 会 弹出 页 面 提示 信息 ,如 





图 13-14 所 示 。 






口 连接 indexDB6 数 振 库 X 
所 2 © file///FVgithub/Book/compiled_in_hs/code/indexDB.html Yr 同 三 


[| 


















此 网 页 显示 : 


政 掺 二 连 授 成 功 
口 世上 比 页 再 号 示 对 话 杠 . 























图 13-14 连接 收据 库 
如 果 需 要 删除 现 有 数据 库 ,可 以 调用 deleteDatabase 方法 ,并 传递 要 删除 的 数据 库 名 
称 ,代码 如 下 : 


function deleteDatabase() { 
var deleteDbRequest= localDatabase.indexedDB.deleteDatabase (dbName); 


deleteDbRequest .onsuccess= function (event) { 
//database deleted successfully 


}; 
deleteDbRequest .onerror= function (e) { 

console.log ("Database error: "+e.target .errorCode); 
bs; 


} 
IndexedDB API 非常 强大 ,可 以 使 用 它 创建 具有 丰富 本 地 存储 数据 的 数据 密集 型 应 


用 程序 (尤其 是 离线 的 HTML5 Web 应 用 程序 ) 。 还 可 以 使 用 indexedDB API 将 数据 组 
存 到 本 地 ,使 传统 的 在 线 Web 应 用 程序 (尤其 是 移动 Web 应 用 程序 ) 能 够 更 快 地 运行 和 
响应 ,从 而 消除 每 次 从 Web 服务 器 检索 数据 的 需求 。 例 如 ,可 以 将 选择 列表 的 数据 缓存 


在 indexedDB 数据 库 中 。 
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本 节 简 要 介绍 indexedDB 数据 库 , 可 以 使 用 本 节 的 概念 构建 利用 indexedDB API 的 


离线 应 用 或 移动 Web 应 用 程序 。 
13.3 离线 缓存 
HTML5 引入 了 应 用 程序 缓存 ,这 意味 着 web 应 用 可 进行 缓存 ,并 可 在 没有 因特网 
连接 时 进行 访问 。 


应 用 程序 缓存 有 三 个 优势 : 

。 离线 浏览 : 用 户 可 在 应 用 离线 时 使 用 它们 。 

。 速度 : 已 缓存 资源 加 载 得 更 快 。 

。 减少 服务 器 负载 : 浏览 器 将 只 从 服务 器 下 载 更 新 过 或 更 改过 的 资源 。 

所 有 主流 浏览 器 均 支 持 应 用 程序 缓存 ,但 Internet Explorer 除外 。 

在 开发 支持 离线 的 Web 应 用 程序 时 ,通常 需要 使 用 以 下 三 个 方面 的 功能 : 

(1) 离线 资源 缓存 : 需要 一 种 方式 来 指明 应 用 程序 离线 工作 时 所 需 的 资源 文件 。 这 
样 ,浏览 器 才能 在 在 线 状 态 时 ,把 这 些 文件 缓存 到 本 地 。 此 后 , 当 用 户 离线 访问 应 用 程序 
时 ,这 些 资源 文件 会 自动 加 载 ,从 而 让 用 户 正常 使 用 。 在 HTML5 中 ,通过 缓存 manifest 
文件 指明 需要 缓存 的 资源 ,并 支持 自动 和 手动 两 种 缓存 更 新 方式 。 

(2) 在 线 状态 检测 : 开发 者 需要 知道 浏览 器 是 否 在 线 , 这 样 才 能 够 针对 在 线 或 离线 
的 状态 ,做 出 对 应 的 处 理 。 在 HTML5 中 ,提供 了 两 种 检测 当前 网 络 是 否 在 线 的 方式 。 

(3) 本 地 数据 存储 : 离线 时 ,需要 能 够 把 数据 存储 到 本 地 ,以 便 在 线 时 同步 到 服务 器 
上 。 为 了 满足 不 同 的 存储 需求 ,HTML5 提供 了 DOM Storage 和 Web SQL Database 两 
种 存储 机 制 。 前 者 提供 了 易 用 的 key/value 对 存储 方式 ,而 后 者 提供 了 基本 的 关系 数据 
库存 储 功能 。 


133.1 建立 一 个 应 用 缓存 


为 了 能 够 让 用 户 在 离线 状态 下 继续 访问 Web 应 用 ,开发 者 需要 提供 一 个 缓存 
manifest 文件 。 这 个 文件 中 列 出 了 所 有 需要 在 离线 状态 下 使 用 的 资源 ,浏览 器 会 把 这 些 
资源 缓存 到 本 地 。 

如 需 启 用 应 用 程序 缓存 ,首先 需要 在 文档 的 二 html 二 标签 中 设置 manifest 属性 。 


< IDOCTYPE HTML> 
<html manifest="demo.appcache"> 


</html> 


每 个 指定 了 manifest 的 页 面 在 用 户 对 其 访问 时 都 会 被 缓存 。 如 果 未 指定 manifest 
属性 , 则 页 面 不 会 被 缓存 (除非 在 manifest 文件 中 直接 指定 了 该 页 面 )。manifest 文件 的 
建议 文件 扩展 名 是 . appcache。 同 时 manifest 文件 需要 配置 正确 的 MIME-type, 类 型 为 
"text/cache-manifest" ,该 设置 必须 在 Web 服务 器 上 进行 。 
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1332 配置 manifest 文 件 


manifest 文件 是 简单 的 文本 文件 , 它 告知 浏览 器 被 缓存 的 内 容 ( 以 及 不 缓存 的 内 容 )。 

manifest 文件 可 分 为 三 个 部 分 : 

(1) CACHE MANIFEST: 在 此 标题 下 列 出 的 文件 将 在 首次 下 载 后 进行 缓存 。 

(2) NETWORK: 在 此 标题 下 列 出 的 文件 需要 与 服务 器 的 连接 , 且 不 会 被 缓存 。 

(3) FALLBACK: 在 此 标题 下 列 出 的 文件 规定 当 页 面 无 法 访问 时 的 回 退 页 面 ( 比 如 
404 页 面 ) 。 

下 面 分 开 介绍 这 三 部 分 内 容 。 

第 一 行 CACHE MANIFEST 是 必需 的 : 

CACHE MANIFEST 

/theme .css 

/logo.gif 

/main.js 

上 面 的 manifest 文件 列 出 了 三 个 资源 : 一 个 CSS 文件 ,一 个 GIF 图 像 , 以 及 一 个 
JavaScript 文件 。 当 manifest 文件 加 载 后 ,浏览 器 会 从 网 站 的 根 目录 下 载 这 三 个 文件 。 
然后 ,无 论 用 户 何 时 与 因特网 断 开 连 接 , 这 些 资源 依然 是 可 用 的 。 

下 面 的 NETWORK 规定 文件 login. asp 永远 不 会 被 缓存 , 且 离 线 时 是 不 可 用 的 : 


NETWORK: 

login.asp 

可 以 使 用 星 号 来 指示 所 有 其 他 资源 /文件 都 需要 因特网 连接 ， 
NETWORK: 


基 


下 面 的 FALLBACK 规定 如 果 无 法 建立 因特网 连接 , 则 用 offline. html 替代 /html5/ 
目录 中 的 所 有 文件 : 


FALLBACK: 
/html5/ /404.html 


这 里 写 了 两 个 URL, 主 要 原因 是 第 一 个 URL 是 资源 ,第 二 个 是 替补 。 
将 三 部 分 内 容 , 顺 序 写 人 ,就 是 一 个 完整 的 manifest 文件 ,代码 如 下 。 


CACHE MANIFEST 
#2012- 02- 21 v1.0.0 
/theme .css 
/1ogo.gif 


/main.js 


NETWORK: 


login.asp 
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FALLBACK: 
/html15/ /404.html 


在 上 述 的 代码 中 ,可 能 会 发 现 这 样 一 行 : 
#2012- 02- 21 v1.0.0 


在 这 里 以 "# "开头 的 是 注释 行 , 但 也 可 满足 其 他 用 途 。 应 用 的 缓存 会 在 其 manifest 
文件 更 改 时 被 更 新 。 如 果 编 辑 了 一 幅 图 片 ,或 者 修改 了 一 个 JavaScript 函数 ,这 些 改变 都 
不 会 被 重新 缓存 。 更 新 注释 行 中 的 日 期 和 版 本 号 是 一 种 使 浏览 器 重新 缓存 文件 的 办 法 。 

一 旦 文件 被 缓存 , 则 浏览 器 会 继续 展示 已 缓存 的 版 本 ,即使 修改 了 服务 器 上 的 文件 也 
是 如 此 。 为 了 确保 浏览 器 更 新 缓存 ,也 需要 更 新 manifest 文件 。 一 般 浏览 器 对 缓存 数据 
的 容量 限制 可 能 不 太一 样 ( 某 些 浏览 器 设置 的 限制 是 每 个 站 点 5MB) 。 


1333 更 新 缓存 


应 用 程序 可 以 等 待 浏览 器 自动 更 新 缓存 ,也 可 以 使 用 JavaScript 接口 手动 触发 更 新 。 

(1) 自动 更 新 。 浏 览 器 除了 在 第 一 次 访问 Web 应 用 时 缓存 资源 外 ,只 会 在 缓存 
manifest 文件 本 身 发 生变 化 时 更 新 缓存 。 而 缓存 manifest 中 的 资源 文件 发 生变 化 并 不 会 
触发 更 新 。 

(2) 手动 更 新 。 开 发 者 也 可 以 使 用 window. applicationCache 的 接口 更 新 缓存 。 方 
法 是 检测 window. applicationCache. status 的 值 ,如 果 是 UPDATEREADY ,那么 可 以 调 
用 window. applicationCache. update() 。 


更 新 缓存 ,代码 如 下 : 


if (window.applicationCache.status==window.applicationCache .UPDATEREADY) 
{ 

window.applicationCache.update (); 
} 


这 样 , 当 服务 器 端 更 新 内 容 时 ,客户 端 缓存 内 容 也 会 发 生 改 变 。 


13.4 地 理 位 置 


地 理 位 置 (Geolocation) 是 HTML5 的 重要 特性 之 一 ,本 节 将 介绍 如 何 使 用 地 理 位 置 
API 来 获取 用 户 的 地 理 位 置信 息 , 从 而 借助 这 一 功能 开发 基于 位 置信 息 的 应 用 。 


1341 地 理 位 置 元 素 的 基础 知识 


在 访问 位 置信 息 前 ,浏览 器 都 会 询问 用 户 是 否 共享 其 位 置信 息 , 以 Chrome 浏览 器 为 
例 , 如 果 允 许 Chrome 浏览 器 与 网 站 共享 位 置 ,.Chrome 浏览 器 会 向 Google 位 置 服务 发 送 
本 地 网 络 信息 ,确定 所 在 的 位 置 。 然 后 ,浏览 器 会 与 请 求 使 用 位 置 的 网 站 共享 位 置 。 
HTML5 地 理 位 置 API 使 用 非常 简单 .基本 调用 方式 如 下 : 
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navigator.geolocation.getCurrentPosition (locationSuccess, locationError, { 
// 指 示 浏 览 器 获取 高 精度 的 位 置 , 默 认为 false 
enableHighAccuracy: true, 
// 指 定 获取 地 理 位 置 的 超时 时 间 ,默认 不 限时 ,单位 为 毫秒 
timeout: 5000, 
// 最 长 有 效 期 ,在 重复 获取 地 理 位 置 时 ,此 参数 指定 多 久 再 次 获取 位 置 
maximumAge: 3000 
D; 


Jelse{ 


if (navigator.geolocation) { 


alert ("Your browser does not support Geolocation!"); 


} 
同时 geolocation 用 于 获取 基于 浏览 器 的 当前 用 户 地 理 位置 ,提供 了 如 下 3 个 方法 : 


void getCurrentPosition (onSuccess, onError, options); 


// 获 取 用 户 当前 位 置 


int watchCurrentPosition (onSuccess, onError, options); 


// 持 续 获取 当前 用 户 位 置 


void clearWatch (watchId) 
//watchId 为 watchcurrentPosition 返 回 的 值 
// 取 消 监 控 


locationError 和 locationSuccess 两 个 回调 函数 可 以 在 获取 位 置信 息 后 执行 相应 的 操 
作 。 如 当 获 取 位 置信 息 失败 时 ,可 以 根据 错误 类 型 提示 信息 ,代码 如 下 : 


locationError: function (error){ 
switch (error.code) { 

Case error.TIMEOUT: 
showError ("A timeout occured! Please try again!"); 
break; 

Case error .POSITION UNAVAILABLE: 
showError ('We can\'t detect your location. Sorry!'); 
break; 

Case error .PERMISSION DENIED: 
ShowError ('Please allow geolocation access for this to work.'); 
break; 

case error .UNKNOWN ERROR: 
showError ('An unknown error occured!'); 


break; 
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当 获取 位 置信 息 成 功 时 ,返回 的 数据 中 包含 经 纬度 等 信息 ,结合 Google Map API 即 
可 在 地 图 中 显示 当前 用 户 的 位 置信 息 ,代码 如 下 : 


locationSuccess: function (Position){ 


} 


var coords=position.coords; 
var latlng= new google.maps.LatIng( 
// 维 度 
coords.latitudev 
// 精 度 
coords.longitude 
) 7 
Var myOptions={ 
// 地 图 放大 倍数 
zoom: 12, 
// 地 图 中 心 设 为 指定 坐标 点 
center: latlng, 
// 地 图 类 型 
mapTypelId: google.maps .MapTypeId.ROADMAP 
1 
// 创 建 地 图 并 输出 到 页 面 
var myMap= new google.maps.Map( 
document .getElementById ("map") ,myOptions 
) 7 


// 创 建 标记 

Var marker= new google.maps.Marker({f 
// 标 注 指定 的 经 纬度 坐标 点 
position: latlng, 
// 指 定 用 于 标注 的 地 图 
map: myMap 

D; 

// 创 建 标 注 窗 口 


Var infowindow=new google.maps.InfoWindow ({ 
content:" 您 在 这 里 <br/> 纬 度 :"+ 
coords.latitudet "<br/> 经 度 :"+ coords.longitude 

D); 
// 打 开标 注 窗口 


infowindow.open (myMap, marker) ; 


需要 注意 的 是 ,位 置 服务 用 于 确定 所 在 位 置 的 本 地 网 络 信息 包括 : 有 关 可 见 Wi-Fi 
接 入 点 的 信息 (包括 信号 强度 ) 有 关 本 地 路 由 器 的 信息 、 计 算 机 的 IP 地 址 。 位 置 服务 的 
准确 度 和 覆盖 范围 因 位 置 不 同 而 异 。 


13.5 本 章 小 结 


本 章 主要 介绍 了 画布 canvas 元 素 的 使 用 ,以 及 使 用 Web Storage 对 象 或 者 本 地 数据 
库 实现 本 地 存储 功能 ,之 后 介绍 的 离线 缓存 和 地 理 位 置 技术 可 以 帮助 构建 Web App 
程序 。 


